CODEWITHSUNDEEP
javascriptjquery
Norton
Norton

Reputation: 25

Loop Over Input Fields; Stop After Two Iterations

I have five form fields that will initially NOT be pre-populated with any values.

If a user fills out one of the fields, the next time they visit the form that field will be pre-populated with the value from the previous visit.

Here's what I'm trying: I'd like to create a loop that iterates through the fields. It will always check to see if there are empty fields. After finding 2 empty fields, the loop will stop and only show those 2 empty fields, while the other fields are hidden.

Here's what I have so far...I just can't figure how to stop after iterating through two fields,

HTML:

<form action="">
<input id="first" type="text" value="" />
<input id="second" type="text" value="" />
<input id="third" type="text" value="" />
<input id="fourth" type="text" value="" />
<input id="fifth" type="text" value="" />
</form>

JS: 

        $(document).ready(function() {
        $('input').hide();

        var firstValue = $('input[id="first"]').val(),
        secondValue    = $('input[id="second"]').val(),
        thirdValue     = $('input[id="third"]').val(),
        fourthValue    = $('input[id="fourth"]').val(),
        fifthValue     = $('input[id="fifth"]').val();

        var firstField = $('input[id="first"]'),
        secondField    = $('input[id="second"]'),
        thirdField     = $('input[id="third"]'),
        fourthField    = $('input[id="fourth"]'),
        fifthField     = $('input[id="fifth"]');

        var formValues = [firstValue, secondValue, thirdValue, fourthValue, fifthValue];
        var fieldIds = [firstField, secondField, thirdField, fourthField, fifthField];

        for (var i = 0; i < fieldIds.length; i++) {
            for (var i = 0; i < formValues.length; i++) {
                if ( formValues[i] === '' ) {
                    fieldIds[i].show();
                    return false;
                }
            }           
        }

    });

Upvotes: 1

Views: 154

Answers (3)

r3wt
r3wt

Reputation: 4742

I think that Jack provides the best answer, but this should work too. here, i use a second counter j and break the loop when j % 2 == 0, so at this time its found two empty fields. this is known as a modulus or the modulo operator.

$(document).ready(function() {
        $('input').hide();

        var firstValue = $('input[id="first"]').val(),
        secondValue    = $('input[id="second"]').val(),
        thirdValue     = $('input[id="third"]').val(),
        fourthValue    = $('input[id="fourth"]').val(),
        fifthValue     = $('input[id="fifth"]').val();

        var firstField = $('input[id="first"]'),
        secondField    = $('input[id="second"]'),
        thirdField     = $('input[id="third"]'),
        fourthField    = $('input[id="fourth"]'),
        fifthField     = $('input[id="fifth"]');

        var formValues = [firstValue, secondValue, thirdValue, fourthValue, fifthValue];
        var fieldIds = [firstField, secondField, thirdField, fourthField, fifthField];
        var j = 0;
        for (var i = 1; i < fieldIds.length; i++) {
            if ( formValues[i] === '' ) {
                fieldIds[i].show();
                j++;//we found an empty field
                if (j % 2 == 0)
                {
                    break;
                }
            }
        }
});

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173642

Take all input fields, take the first two empty fields and show them; finally, take the complement of that to hide the rest:

var $inputFields = $('form input:text'),
$emptyFields = $inputFields
  .filter(function() { return this.value == ''; })
  .slice(0, 2)
  .show();

$inputFields
  .not($emptyFields)
  .hide();

Demo

Upvotes: 1

Jeromy French
Jeromy French

Reputation: 12121

$(document).ready(function() {
    $('input').hide().each( function(){
        var index=0; //initilialize the counter
        if( $(this).val().length ){ //check for input's length
            if(index < 2) {
                $(this).show();
                index=index+1 //or index++ if you like
            }
            else {
                break;
            }
        }
    }
)};

If you want to include select and textarea fields in your eligible input population, use $(':input').hide().each(...). If you have multiple forms on your page, you would want to include that in your selector, too: $('#intended_form').find(':input').hide().each(...).

http://api.jquery.com/each/

Upvotes: 1

Related Questions