在 serializeArray() 表单之后使用 each()

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 循环：

完整的 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()

Use each() after serializeArray() a form

jquery

serializearray