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

试试这个......

<script type="text/javascript">
    var counters = 0;
    var msg = '';

    $(document).ready(function() {
        counters = 0;
        $("#addmore").click(function() {
            counters = counters + 1;
            $("li").append("<ul><input type='text' id='hd" + counters + "' name='hd' value='heading'>" +
                               "<input type='text' id='amount" + counters + "' name='amount' value='amount'></ul>");
        });

        $("#submit").click(function() {
            msg = '';
            for (var i = 1; i <= counters; i++) {
                msg += $('#hd' + i).val() + ' ' + $('#amount' + i).val() + ' ';
            }
            alert(msg);
        });
    });
</script>

<div>
    <input type="button" value="+" id="addmore" />
    <form method="post" action="">
    <li>
        <ul>
        </ul>
    </li>
        <input type="submit" value="Submit" id="submit"/>
    </form>
</div>

Answer 3

try
var nodes = $('#formid input,#formid textarea,#formid select');
                    for (var i = 0; i < nodes.length; i++) {

                            arr[i].id = nodes[i].id;
                            arr[i].value=nodes[i].value;
                    }

你将拥有数组中的所有数据

Answer 4

我认为你应该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 5

以下是Working Demo简短和简单的jQuery内容

您正在附加具有相同ID的文本框，我建议您不要这样做，不管怎样，您对这些值的警告信息将如下所示：

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

是的，它不会显示元素，因为jQuery动态添加它们，或者View Source只显示静态元素。 jQuery不会在物理上编写新元素。它在客户端创建它们。让我们说，虚拟。

但是困扰你的是什么？如果你想通过各种方式查看javascript新创建的元素/属性，请使用Firefox并安装名为FireBug的附加组件。

Answer 6

$(document).ready(function () {
            var counter = 1;
            $("#addmore").click(function () {
                counter++;
                var cloneText = $("li").first().clone();
                $('li').last().after(cloneText);
                $(cloneText).find('input').each(function() {

                    $(this).val('');
                    if($(this).attr('id') == 'hd1') {
                        $(this).attr('id', 'hd'+counter);
                        $(this).attr('name', 'hd'+counter);
                    } else {
                        $(this).attr('id', 'amount'+counter);
                        $(this).attr('name', 'amount'+counter);
                    }
                })
            });

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

试试以上代码。同时登入http://fiddle.jshell.net/UKXLp/

动态添加输入字段

6 个答案: