如何处理动态创建的文本输入值？

Question

这是link

    <form onsubmit="return false"></form>
<label for="quantity">qantity</label>
<select name="quantity">
    <script>
        for (var i = 1; i < 81; i++) {
                document.write("<option value='"+i+"'>"+i+"</option>");
            };
    </script>
</select>
<button id="next">next</button>
<form id="itemform" onsubmit="return false"></form>
<script>
$('#next').click(function(){
    var quantity = ($('select[name=quantity]').val());
    $('#itemform').html("");
    for (var i = 0; i < quantity; i++) {
        $('#itemform').append("<label for='itemname"+i+"'>itemname</label><br><input type='text' name='itemname"+i+"' id='itemname"+i+"'><br><label for='itemprice"+i+"'>itemprice</label><br><input type='text' name='itemprice"+i+"' id='itemprice"+i+"'><br><br>");
    };
    $('#itemform').append("<button id='submit'>submit</button>");
});
$('#submit').click(function(){
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item)
});

它会创建与选择一样多的文本输入。

然后，它生成像 {itemname1 : "an awesome thing", ...} 这样的对象。

创建输入效果很好，但它不会生成对象。

It makes object input that doesn't created dynamically.

    <form onsubmit="return false">
    <input type="text" name="first">
    <input type="text" name="second">
    <input type="submit" id="submit">
</form>
<p id="res"></p>
<script>
$('#submit').click(function(){
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item)
});
</script>

为什么它没有按我的预期工作？

Answer 1

$('#submit') 在您的示例中不存在。我用$('#itemform').submit() 代替了它，它似乎正在记录一个巨大的对象。查看更新的 jfiddle here。

$('#itemform').submit(function(e){
    e.preventDefault();
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item)
});

另外，如果您正在考虑改进项目的存储方式，我再次更新了 jsfiddle here 以向您展示如何对项目进行分组：

$(document).ready(function() {
    $('#next').click(function(){
        var quantity = ($('select[name=quantity]').val());
        $('#itemform').html("");
        for (var i = 0; i < quantity; i++) {
            $('#itemform').append("<div class='item' data-item='" + i + "'><label for='itemname"+i+"'>itemname</label><br><input type='text' name='name' id='itemname"+i+"'><br><label for='itemprice"+i+"'>itemprice</label><br><input type='text' name='price' id='itemprice"+i+"'><br><br></div>");
        };
        $('#itemform').append("<button id='submit'>submit</button>");
    });
    $('#itemform').submit(function(e){
        e.preventDefault();

        var items = {};
        $('#itemform div.item').each(function(){

            var item = {};
            $(this).find('input[type=text]').each(function() {     
                var key = $(this).attr('name');
                var value = $(this).val();
                item [key] = value;
            });
            items[$(this).data('item')] = item;
        });
        console.log(items)
    });
});

这会产生一个您可以使用的更好的对象：

{
  "0": {
    "name": "item1name",
    "price": "item1price"
  },
  "1": {
    "name": "item2name",
    "price": "item2price"
  },
  "2": {
    "name": "item3 here",
    "price": "item3 has a big price"
  }
}

Answer 2

不要将处理函数附加到表单的提交按钮的点击事件。相反，使用表单的提交事件。

此外，即使在语法上没有区别，但为了便于阅读，您可能需要添加一个“;”在“console.log(item)”之后。

$('#itemform').submit(function(){
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item);
    return false;
});

此外，在您的情况下，您的表单不需要 onSubmit 属性，只需返回“false”并将处理函数附加到表单的提交事件。

<form id="itemform"></form>

在此处查看the updated fiddle。