Когда все предыдущие поля заполнены, добавлять новые поля ввода

Question

Вот мой текущий HTML и CSS код:

<form method="post" id="achievementf1" action=""> 
    <span>1.</span> 
    <input type="text" name="achievement1" id="achievement1" /> 
    <br /> 
    <span>2.</span> 
    <input type="text" name="achievement2" id="achievement2" /> 
    <br /> 
    <span>3.</span> 
    <input type="text" name="achievement3" id="achievement3" /> 
    <br />      
    <input type="submit" name="submit1" value="Registrate" /> 
    </form> ​ 

#border #info-box #info #box input[type="text"] { 
    float: left; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    height: 25px; 
    width: 650px; 
    outline: none; 
} 
#border #info-box #info #box input[type="submit"] { 
    margin-left: 500px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    height: 35px; 
    color: #fff; 
    font-size: 20px; 
    border: 2px solid #fff; 
    border-radius: 8px 8px 8px 8px; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 3px; 
    cursor: pointer; 
}​ 

Вы можете увидеть его в действии на http://jsfiddle.net/mzNtj/2/. Я хотел бы знать, как я могу автоматически добавлять новое поле ввода, когда все остальные были заполнены. У меня есть основная идея, чтобы прочитать значение каждого поля и проверить его с помощью инструкции if. Затем, если ни один не пуст, добавьте новый.

Это подходящий способ проверить или у кого-нибудь есть лучшие идеи?

Answer 1

Попробуйте следующий код:

$(function(){ 
    $(document).on("change","input", function(){ 
     var allGood=true; 
     var lastInputField=0; 
     $("input").each(function() { 
      if ($(this).val() =="") { 
       allGood=false; 
       return false; 
      } 
      lastInputField++; 
     }); 

     if (allGood) { 
      $("<span>" + lastInputField + "<input type='text' id='lastinputfieldId" + lastInputField +"'" + 
       "name='lastinputfieldName" + lastInputField + "'></span>").appendTo("form"); 
     } 
    }); 
}); 
​ 

Демонстрация: http://jsfiddle.net/mzNtj/3/.

Answer 2

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

Answer 3

попробовать это одно:

http://jsfiddle.net/F8qR2/

код:

function AllInputsFilled() { 
    return $("input[type='text']", $("#achievementf1")).filter(function() { 
     return $(this).val().trim() === ""; 
    }).size() === 0; 
} 

function AdditionEvent() { 
    if (AllInputsFilled()) { 
     AddInput();  
    } 
} 

function AddInput() { 
    var cnt = $("input[type='text']", $("#achievementf1")).size() + 1; 
    $("<br><span>" + cnt + "</span><input type='text' name='achievement" + cnt+ "' id='achievement" + cnt+ "' />").insertAfter("#achievementf1 input[type='text']:last"); 
    $("input", $("#achievementf1")).unbind("keyup").bind("keyup", function(){ AdditionEvent() }); 

} 

$("input", $("#achievementf1")).bind("keyup", function(){ AdditionEvent() });​ 

Answer 4

Хорошо, взгляните на эту jsfiddle: http://jsfiddle.net/Ralt/mzNtj/4/

внимательно прочитать комментарии, чтобы понять, что этот код делает:

// First, listen for the "onkeypress" event instead of the "blur" or "change". 
// Why? For the UX, since the user will think he can click the submit 
// button as soon as the third field is filled in if you use the "blur" or 
// "change" event. 
document.forms[ 'achievementf1' ].onkeypress = function(e) { 
    // Some cross-browser handling 
    var e = e || window.event, 
     target = e.target || e.srcElement; 

    // If the target is an INPUT 
    if (target.nodeName === 'INPUT') { 

     // Now here is the tricky part: 
     // The "every" method returns false if *one* callback returns false, 
     // otherwise it returns true. 
     // And we use !! to check if it's not empty. 
     var allNotEmpty = [].every.call(this.elements, function(el) { 
      return !!el.value; 
     }) 

     // If it's true, it means all the fields are not empty 
     if (allNotEmpty) { 

      // So let's create an input 
      var newInput = document.createElement('input') 
      // Set some properties 
      // And then... insert it before the submit button :-) 
      this.insertBefore(newInput, this.elements[ 'submit1' ]); 
     } 
    } 
} 

Я знаю, мой код странный, поскольку мне очень нравится кросс-браузер для обработки событий, но every не поддерживается устаревшими браузерами. О хорошо ...