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

你可以看到小提琴。

我想要的是当我点击按钮添加字段时，而不是在现有字段上添加更多字段，而是添加新字段。

我的意思是，例如，第一次我点击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

这个怎么样

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

Answer 3

更改了一些内容（现在它更具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/