0

我制作了以下代码

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 个文本字段。

我还没有下定决心这样做。请有人通过代码帮助我，一般来说我知道为什么会这样，但我不知道如何解决这个问题。

4

3 回答 3

2

尝试

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

});

演示：小提琴

于 2013-07-10T10:19:43.923 回答
1

这个怎么样

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());}
                            });
   });
于 2013-07-10T10:25:20.473 回答
0

改变了一些东西（现在它更像 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/

于 2013-07-10T10:23:24.733 回答