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> 

ЯШ:

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, я хочу 14textfields.

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

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