我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时，是否有可能在一个关联数组中获得该表单的所有输入字段?
当前回答
似乎很奇怪，没有人赞成或提出一个简洁的解决方案来获得列表数据。几乎没有任何形式是一维对象。
当然，这种解决方案的缺点是必须在[0]索引处访问单例对象。但在我看来，这比使用12行映射解决方案要好得多。
var formData = $('#formId').serializeArray().reduce(function (obj, item) {
if (obj[item.name] == null) {
obj[item.name] = [];
}
obj[item.name].push(item.value);
return obj;
}, {});
其他回答
对于多个选择元素(<select multiple="multiple">)，我修改了@Jason Norwood-Young的解决方案以使其工作。
答案(如上所述)只接受所选择的第一个元素的值，而不是所有元素。它也没有初始化或返回数据，前者会抛出一个JavaScript错误。
以下是新版本:
function _get_values(form) {
let data = {};
$(form).find('input, textarea, select').each(function(x, field) {
if (field.name) {
if (field.name.indexOf('[]') > 0) {
if (!$.isArray(data[field.name])) {
data[field.name] = new Array();
}
for (let i = 0; i < field.selectedOptions.length; i++) {
data[field.name].push(field.selectedOptions[i].value);
}
} else {
data[field.name] = field.value;
}
}
});
return data
}
用法:
_get_values($('#form'))
注意:你只需要确保你选择的名称有[]附加到它的末尾，例如:
<select name="favorite_colors[]" multiple="multiple">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
也有类似的问题，只是稍微有点扭曲，我想我应该把它扔掉。我有一个回调函数，得到的形式，所以我已经有一个形式对象，不能简单的变量$('form:input')。相反，我想到了:
var dataValues = {};
form.find('input').each(
function(unusedIndex, child) {
dataValues[child.name] = child.value;
});
它类似但不完全相同的情况，但我发现这条线索非常有用，我想我会把它塞在末尾，希望其他人也能发现它有用。
Serialize()是最好的方法。@ Christopher Parker说，Nickf的回答实现了更多，但它没有考虑到表单可能包含文本区域和选择菜单。最好使用serialize()，然后根据需要对其进行操作。serialize()中的数据可以在Ajax post或get中使用，因此没有任何问题。
在这个问题上有点晚了，但这个更简单:
$('#myForm').submit(function() {
// Get all the forms elements and their values in one step
var values = $(this).serialize();
});
http://api.jquery.com/serializearray/
$('#form').on('submit', function() {
var data = $(this).serializeArray();
});
这也可以在没有jQuery的情况下使用XMLHttpRequest Level 2 FormData对象完成
http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface
var data = new FormData([form])
