在 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>
很简单的一个。它使我能够从我的客户那里获得 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
.
关于如何执行此操作的任何帮助?
建议您将这些对包装在父级中并忽略使用 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(''));
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 代码中的任何内容,您可以将 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);
}
});
希望对你有所帮助。
所以我有这样的表格:
<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
.
关于如何执行此操作的任何帮助?
建议您将这些对包装在父级中并忽略使用 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(''));
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 代码中的任何内容,您可以将 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);
}
});
希望对你有所帮助。