我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
当前回答
$('#myForm').bind('submit', function () {
var elements = this.elements;
});
elements变量将包含表单中的所有输入、选择、文本区域和字段集。
其他回答
$('#myForm').submit(function() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
});
感谢来自Simon_Weaver的提示,这里有另一种方法,你可以使用serializeArray:
var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
values[field.name] = field.value;
});
注意,这个代码段在<select multiple>元素时将失败。
在jQuery 1.3版本中,新的HTML 5表单输入不能使用serializeArray。这适用于版本1.4+
不要忘记复选框和单选按钮-
var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
var o = {};
if (n.type == "radio" || n.type == "checkbox")
o[n.id] = $(n).attr("checked");
else
o[n.id] = $(n).val();
return o;
});
return obj
也有类似的问题,只是稍微有点扭曲,我想我应该把它扔掉。我有一个回调函数,得到的形式,所以我已经有一个形式对象,不能简单的变量$('form:input')。相反,我想到了:
var dataValues = {};
form.find('input').each(
function(unusedIndex, child) {
dataValues[child.name] = child.value;
});
它类似但不完全相同的情况,但我发现这条线索非常有用,我想我会把它塞在末尾,希望其他人也能发现它有用。
似乎很奇怪,没有人赞成或提出一个简洁的解决方案来获得列表数据。几乎没有任何形式是一维对象。
当然,这种解决方案的缺点是必须在[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;
}, {});
与nickf给出的解决方案相同,但考虑了数组输入名称 如
<输入类型=“文本”
values = {};
$("#something :input").each(function() {
if (this.name.search(/\[\]/) > 0) //search for [] in name
{
if (typeof values[this.name] != "undefined") {
values[this.name] = values[this.name].concat([$(this).val()])
} else {
values[this.name] = [$(this).val()];
}
} else {
values[this.name] = $(this).val();
}
});