jquery - 入力フィールドを動的に追加する

Question

次のコードは、入力フィールドを追加するのに役立ちますが、送信時にすべての入力データ レコードが表示されるわけではありません。それを理解して理解するのを手伝ってください。

$(document).ready(function(){
    $("#addmore").click(function(){
//      alert(counters);
        $("li").append("<li><input type='text' id='hd' name='hd' value='heading' onClick='this.select();'> <input type='text' id='amount' name='amount' value='amount' onClick='this.select();'></li>");
    });

    $("#submit").click(function () {

        var msg = '';
        for(i=1; i<counters; i++){
            msg += $('#hd' + i).val() + $('#amount' + i).val();
        }
        alert(msg);
     });
});

<button id="addmore">+</button>
<form method="post">
    <ul>
        <li>
            <input type="text" id="hd1" name="hd1" value="heading" onClick="this.select();">
            <input type="text" id="amount1" name="amount1" value="amount" onClick="this.select();">
        </li>
    </ul>
<input type="submit" value="Submit" id="submit">
</form>

Answer 1

これが実際の例です。これを試してください.......

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script language="javascript">
    function deleterow(id){
        var to_del='row_id_'+id;
        $(to_del).destroy();
        var count_row = document.getElementById('count_row').value;
        count_row--;
        //alert(count_row);
        document.getElementById('count_row').value = count_row;
    } 
    function deletefirstrow(first_row)
    {
    $(first_row).destroy();
    var count_row = document.getElementById('count_row').value;
    count_row--;
    //alert(count_row);
    document.getElementById('count_row').value = count_row;
    } 
    function addrow()
    {
    var div = document.createElement('div');
    var count_row = document.getElementById('count_row').value;
    count_row++;
    //alert(count_row);
    document.getElementById('count_row').value = count_row;
    var content = '<div id="row_id_'+count_row+'"><select id="sweet_type[]" name="sweet_type[]" style="width:112px"><option>select item type</option><option>Besan Ladoo</option><option>Bundi Ladoo</option></select>&nbsp;<select id="order_type[]" name="order_type[]" style="width:123px"><option>select order type</option><option>1 kg</option><option>1/2 kg</option></select>&nbsp;<input type="text" id="quantity[]" name="quantity[]" size="10" value="" class="inputbox" maxlength="100" style="width:50px"/>&nbsp;<label class="button" style="cursor:pointer" onclick="deleterow('+count_row+')">Delete</label></div>';
    div.innerHTML = content;
    var container = document.getElementById('rowcontaniner');
    container.appendChild(div);
    } 
</script>
<form action="/order-form.html" method="POST" id="submitForm" name="submitForm" class="form-validate" onsubmit="return validate_form()" >
  <div class="form_div_content " id="vScroll" style="width:790px; height:282px;">
    <!-- Form Field Row Start -->
    <div class="form_row" style="height:280px;">
 <table>
    <tr>
                <td colspan="4"><div id="to_del_firstrow">
                    <select class="" style="width:112px" id="sweet_type[]" name="sweet_type[]">
                     <option>select item type</option>
                      <option>Besan Ladoo</option>
                      <option>Bundi Ladoo</option>                      
                    </select>
                    <select style="width:123px" id="order_type[]" name="order_type[]">
                      <option>select order type</option>
                      <option>1 kg</option>
                      <option>1/2 kg</option>
                    </select>
                    <input style="width:50px" id="quantity[]" name="quantity[]" size="10" value="" class="inputbox" maxlength="100" type="text">
                    <input id="price[]" name="price[]" size="10" value="" class="inputbox" maxlength="100" type="hidden">
                    <input id="total[]" name="total[]" size="10" value="" class="inputbox" maxlength="100" type="hidden">
                    <label class="button" style="cursor:pointer" onclick="deletefirstrow('to_del_firstrow')">Delete</label>
                  </div>
                  <div id="rowcontaniner">
                  <div></div>
                  </div>
                  </td>

    <tr>
        <td colspan="4">
            <div id="add_row_items" class="form_add button" style="padding:0 5px; margin-right:12px;" onClick="addrow()">
            <label style="cursor:pointer" for="add"> ADD ITEMS</label>
            </div>
        </td>
    </tr>
    <input type="hidden" value="0" id="count_row" name="count_row" />
</tbody>
</div>
</div>
</form>
</table>

Answer 2

append li入ってはいけulないと思いますli

$("#addmore").click(function(){
     var i=$('li').length+1;
     str="<li>";
     str+="<input type='text' id='hd"+i+"' name='hd"+i+"' value='heading' onClick='this.select();'>";
     str+="<input type='text' id='amount"+i+"' name='amount"+i+"' value='amount' onClick='this.select();'></li>";
     $("ul").append(str);
});

 $("#submit").click(function () {
    var msg = '';
    for(i=1; i<=$('li').length; i++){
        msg += $('#hd' + i).val() + $('#amount' + i).val();
    }
    alert(msg);
    return false;
 });

Answer 3

これは、短くてシンプルなjQueryのものを使用したワーキングデモです

同じ ID のテキスト ボックスを追加しています。そうしないことをお勧めします。とにかく、これらの値に対する警告メッセージは次のようになります。

$("#submit").click(function () {
     $('li').find('input').each(function () {
          alert($(this).val());
     });
});

はい、要素は表示されません。なぜなら、jQuery が要素を動的に追加するか、ビュー ソースが静的要素のみを表示するためです。jQuery は新しい要素を物理的に書き込みません。クライアント側でそれらを作成します。事実上、言ってみましょう。

しかし、何が気になりますか？どうしてもJavaScriptで新しく作成した要素・属性を見たい場合は、Firefoxを使い、FireBugというアドオンをインストールしてください。