动态添加输入字段答案

【问题标题】：add input fields dynamically动态添加输入字段
【发布时间】：2013-05-27 09:57:35
【问题描述】：

以下代码帮助我添加更多输入字段，但提交时并没有带来所有输入数据记录。请帮忙弄清楚并理解。

$(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>

【问题讨论】：

变量“counters”从何而来？
添加所有具有相同 id 的新输入不是问题吗？
它在 document.ready 之前，它的 var counters = 1
所有输入来自jquery append
只是 jQuery 的一个示例：jqueryui.com/dialog/#modal-form

标签： jquery forms add

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
                    }

你将拥有 arr 中的所有数据

【讨论】：

【解决方案4】：

我认为你应该在 ul 中 append li 而不是在 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;
 });

【讨论】：

【解决方案5】：

这里是 Working Demo 和简短的 jQuery 东西

您正在附加具有相同 ID 的文本框，我建议您不要这样做，无论如何，您对这些值的警报消息将如下所示：

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

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

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

【讨论】：

一件事。添加更多行不会在查看源代码模式下显示 html？
看我在回答中给出了描述

【解决方案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/

【讨论】：