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：“一个很棒的东西”，......}。

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

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

请勿将处理功能附加到表单的提交按钮的点击事件中。相反，请使用表单的提交事件。

此外，尽管语法并没有区别，但为了便于阅读，您可能希望添加一个＆＃34 ;;＆＃34;在＆＃34; console.log（item）＆＃34;之后。

$('#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属性，只需返回＆＃34; false＆＃34;将处理功能附加到表单的提交事件。

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

请在此处查看the updated fiddle。

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

2 个答案: