Блог

У меня есть пять полей формы, которые изначально НЕ будут предварительно заполнены никакими значениями.

Если пользователь заполняет одно из полей, при следующем посещении формы это поле будет предварительно заполнено значением из предыдущего посещения.

Вот что я пытаюсь: я хотел бы создать цикл, который выполняет итерации по полям. Он всегда будет проверять, есть ли пустые поля. После нахождения 2 пустых полей цикл остановится и покажет только эти 2 пустых поля, в то время как остальные поля будут скрыты.

Вот что у меня есть на данный момент…Я просто не могу понять, как остановиться после перебора двух полей,

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;
                }
            }           
        }

    });
  

Возьмите все поля ввода, возьмите первые два пустых поля и покажите их; наконец, дополните это, чтобы скрыть остальные:

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

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

ДЕМОНСТРАЦИЯ

 $(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;
            }
        }
    }
)};
  

Если вы хотите включить поля select и textarea в подходящую для вас совокупность входных данных, используйте $(':input').hide().each(...) . Если у вас на странице есть несколько форм, вы также хотели бы включить их в свой селектор: $('#intended_form').find(':input').hide().each(...) .

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

Я думаю, что Джек дает лучший ответ, но это тоже должно сработать. здесь я использую второй счетчик j и прерываю цикл, когда j % 2 == 0 , поэтому на данный момент он обнаружил два пустых поля. это известно как модуль или modulo оператор.

 $(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;
                }
            }
        }
});