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

Use each() after serializeArray() a form

所以我有这样的表格:

<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>

很简单的一个。它使我能够从我的客户那里获得 nameemail。使用 jQuery 我有一个按钮允许我向我的表单添加更多客户(nameemail)。

我需要在每次表单更改时回显这些数据,所以我使用了以下代码:

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

使用 serializeArray() 我可以将所有数据序列化到一个数组中。

我的问题是使用 serializeArray():

来显示这些数据

关于如何执行此操作的任何帮助?

建议您将这些对包装在父级中并忽略使用 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>');
}

无需更改 HTML 代码中的任何内容,您可以将 namesemails 分成两个 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);
    }
});

希望对你有所帮助。