我有一个包含4个不同复选框的表单,其中包含filter_AFFILIATION_1,filter_AFFILIATION_2等等,直到4.我试图通过使用ajax调用动态地将选中的复选框值发送到服务器。这是我的代码:
$('input[type="checkbox"]').change(function(){
var ids = ['filter_AFFILIATION_1','filter_AFFILIATION_2','filter_AFFILIATION_3','filter_AFFILIATION_4'];
for(var i = 0; i < ids.length; i++){
if(document.getElementById(ids[i]).checked === true){
var data = {};
data['request'+i] = $('#'+ ids[i]).val();
console.log(data);
}
}
$.ajax({
type: 'POST',
url: Routing.generate('listingpage'),
contentType: 'application/x-www-form-urlencoded',
data: data,
success: function(result,status,xhr){
console.log(result);
}
如果你看一下
data['request'+i] = $('#'+ ids[i]).val();
console.log(data);
部分代码,如果我点击
,则输出console.log只有第一个复选框:
{request0: "1"}
第一个,然后是第二个复选框:
{request0: "1"}
{request1: "2"}
首先是第二个,然后是第三个复选框:
{request0: "1"}
{request1: "2"}
{request2: "3"}
先是第二个,然后是第三个,然后取消选中第二个复选框:
{request0: "1"}
{request2: "3"}
现在我的问题是我想将数据作为单个对象而不是多个对象发送,例如,如果用户单击第一个复选框,然后第二个,则控制台.log(数据)的输出应为
`{request0: "1", request1: "2"}`
我尝试了很多不同的方法,但似乎没什么用。有什么想法吗?
答案 0 :(得分:1)
您正在覆盖data
个对象。你想要的是在data
循环之外声明for
对象,然后将新的键值对添加到循环中预先存在的对象中:
$('input[type="checkbox"]').change(function() {
var ids = ['filter_AFFILIATION_1', 'filter_AFFILIATION_2', 'filter_AFFILIATION_3', 'filter_AFFILIATION_4'];
// Create object outside of for loop
var data = {};
// Iterate through ids array
for (var i = 0; i < ids.length; i++) {
if (document.getElementById(ids[i]).checked === true) {
// Create new key in pre-existing data object and assign value
data['request' + i] = $('#' + ids[i]).val();
}
}
// Just logging, to check
console.log(data);
// Request
$.ajax({
type: 'POST',
url: Routing.generate('listingpage'),
contentType: 'application/x-www-form-urlencoded',
data: data,
success: function(result, status, xhr) {
console.log(result);
}
});
});