1

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

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

6 回答 6

2

这是工作示例，试试这个.......

<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>
于 2013-05-27T11:40:55.253 回答
1

尝试这个...

<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>
于 2013-05-27T10:12:03.683 回答
0

这是带有简短 jQuery 内容的工作演示

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

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

是的，它不会显示元素，因为 jQuery 会动态添加它们，或者 View Source 仅显示静态元素。jQuery 不会物理地编写新元素。它在客户端创建它们。比方说，实际上。

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

于 2013-05-27T10:36:54.043 回答
0 
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 中的所有数据

于 2013-05-27T10:02:27.320 回答
0

我认为你不应该append li在ulli

$("#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;
 });
于 2013-05-27T10:02:48.100 回答
0 
$(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/

于 2013-05-27T12:05:23.020 回答