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 に答える