Question

所以我有一个这样的表格：

<form>
  <input name="name" value="A. Hitchcock">
  <input name="email" value="a.hitchcock@psychose.com">
  <input name="name" value="Q. Tarantino">
  <input name="email" value="q.tarantino@killbill.com">
  ...
</form>

非常简单。它允许我从我的客户那里获得name和email。使用jQuery，我有一个按钮，允许我在表单中添加更多客户（name和email）。

我需要在每个表单更改上回显这些数据，所以我使用了这段代码：

$('.form-horizontal').on('change','input', function(){
  var dataArray = $('#list-items').serializeArray();
});

使用serializeArray()我可以将所有数据序列化为数组。

我的问题是使用此serializeArray()显示这些数据：

A. Hitchcock的电子邮件地址为：a.hitchcock@psychose.com。
Q. Tarantino的电子邮件地址为：q.tarantino@killbill.com。

有关如何做到这一点的任何帮助吗？

Answer 1

建议您将对包装在父级中，并使用serializeArray（）

进行忽略

<form>
    <div class="person">
        <input name="name[]" value="A. Hitchcock">
        <input name="email[]" value="a.hitchcock@psychose.com">
    </div>
    <div class="person">
        <input name="name[]" value="Q. Tarantino">
        <input name="email[]" value="q.tarantino@killbill.com">
    </div>
</form>

然后映射组中的值：

var res = $('.person').map(function () {
    var $inputs = $(this).find('input');
    return '<li>' + $inputs.eq(0).val() + ' has this email address :' + $inputs.eq(1).val() + '</li>'
}).get();

$('#list').append(res.join(''));

的 DEMO

serializeArray（）创建的对象如下所示：

[{ "name": "name[]", "value": "A. Hitchcock" }, { "name": "email[]", "value": "a.hitchcock@psychose.com" }, { "name": "name[]", "value": "Q. Tarantino" }, { "name": "email[]", "value": "q.tarantino@killbill.com" }]

因此，解析这些仍然需要配对索引来获取名称和电子邮件

如果您真的想这样做，可以使用for循环：

var res= []; for( var i=0; i< arr.length; i=i+2){ res.push('<li>' + arr[i].value + ' has this email address :' + arr[i+1].value + '</li>'); }

Answer 2

在不更改HTML代码中的任何内容的情况下，您可以将names和emails分隔为两个Arrays，例如以下代码，并在简单的for中将它们连接起来循环：

Full Js：

$('.form-horizontal').on('change','input', function(){  
    var names = $("form input[name='name']").serializeArray();
    var emails = $("form input[name='email']").serializeArray();

    for(var i=0;i<=names.length;i++){
        alert(names[i].value+" has this email address : "+emails[i].value);
    }
});

希望能帮助你。

在serializeArray（）表单后使用each（）

2 个答案: