的JavaScript添加文本框按鈕不能正常工作

Question

我做了下面的代碼

HTML：

<form method="post" id="myemailform" name="myemailform" action="form-to-email.php"> 
    <div id="form_container"> 
     <label class="description" for="pax">Number:</label> 
     <div> 
      <select class="select small" id="pax" name="pax"> 
       <option value="" selected="selected"></option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option> 
       <option value="16">16</option> 
       <option value="17">17</option> 
       <option value="18">18</option> 
       <option value="19">19</option> 
       <option value="20">20</option> 
       <option value="21">21</option> 
       <option value="22">22</option> 
       <option value="23">23</option> 
       <option value="24">24</option> 
       <option value="25">25</option> 
       <option value="26">26</option> 
       <option value="27">27</option> 
       <option value="28">28</option> 
       <option value="29">29</option> 
       <option value="30">30</option> 
       <option value="31">31</option> 
       <option value="32">32</option> 
       <option value="33">33</option> 
       <option value="34">34</option> 
       <option value="35">35</option> 
       <option value="36">36</option> 
       <option value="37">37</option> 
       <option value="38">38</option> 
       <option value="39">39</option> 
       <option value="40">40</option> 
      </select> 
     </div> 
     <label class="description">ID:</label> 
     <input type='text' id="idpl" class="id-text-len" name='ids1' placeholder="ID #1"> 
     <input class="btn btn-primary" type='button' id='btnMore' value='Add Ids'> 
</form> 

JS：

jQuery(function ($) { 

    $('#btnMore').click(function() { 
     var form, fields, newField; 

     var e = document.getElementById("pax"); 
     var strUser = e.options[e.selectedIndex].text; 

     form = $("#myemailform"); 
     for (var i = 1; i < strUser; i++) { 
      fields = form.find("input[name^='ids']"); 
      newField = $(fields[0]).clone(); 
      newField.attr('name', 'ids' + (fields.length + 1)); 
      newField.attr('placeholder', 'ID #' + (fields.length + 1)); 
      newField.insertAfter(fields.last()); 
     } 
    }); 

}); 

你可以看到jsfiddle。

我想要的是當我點擊按鈕添加字段，而不是添加更多的現有的，但新的。

我的意思是第一次點擊10，然後添加，作爲結果我會得到10個文本框。然後，如果我點擊14，我不想得到10 + 14 = 24個文本區域，但是又有4個文本區域，我想要14個文本區域。

我還沒有做到這一點。請有人幫助我的代碼，總的來說我知道爲什麼發生這種情況，但我不知道如何解決這個問題。

Answer 1

嘗試

jQuery(function($) { 
    var form = $("#myemailform");; 

    $('#btnMore').click(function() { 
     var fields, newField; 

     var opt = parseInt($('#pax').val()); 
     var len = opt - $('.id-text-len').length; 

     if(len> 0){ 
      for (var i = 0; i < len; i++) { 
       fields = form.find(".id-text-len"); 
       newField = $(fields[0]).clone(); 
       newField.attr('name', 'ids' + (fields.length + 1)); 
       newField.attr('placeholder', 'ID #' + (fields.length + 1)); 
       newField.val(''); 
       newField.insertAfter(fields.last()); 
      } 
     } else { 
      form.find(".id-text-len:gt("+ (opt - 1) +")").remove() 
     } 
    }); 

}); 

演示：Fiddle

Answer 2

改變了一些事情（現在是更多的jQuery風格）：

jQuery(function ($) { 
    $('#btnMore').click(function() { 
     var strUser = $("#pax").val();  
     var form = $("#myemailform");   
     var fields = form.find("input[name^='ids']");  
     for (var i = 0; i < (strUser - fields.length); i++) { 
      var newField = $(fields[0]).clone(); 
      newField.attr('name', 'ids' + (fields.length + 1 + i)); 
      newField.attr('placeholder', 'ID #' + (fields.length + 1 + i));   
      form.find("input[name^='ids']").last().after(newField); 
     } 
    }); 
}); 

入住這裏：http://jsfiddle.net/7QUea/4/

Answer 3

這個怎麼樣

http://jsfiddle.net/7QUea/3/

我認爲這是一個你需要

只是多了一個行

$("input[name^='ids']").not("input[name='ids1']").remove(); 


jQuery(function($) { 

    $('#btnMore').click(function() { 
     $("input[name^='ids']").not("input[name='ids1']").remove(); 
     var form, fields, newField; 
     var e = document.getElementById("pax"); 
     var strUser = e.options[e.selectedIndex].text; 

     form = $("#myemailform"); 
     for (var i = 1; i < strUser; i++) { 
     fields = form.find("input[name^='ids']"); 
     newField = $(fields[0]).clone(); 
     newField.attr('name', 'ids' + (fields.length + 1)); 
     newField.attr('placeholder', 'ID #' + (fields.length + 1)); 
     newField.insertAfter(fields.last());} 
          }); 
    });