填充所有先前字段后,添加新输入字段

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/.