我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
当前回答
希望这能帮助到一些人。:)
// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
//
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
//
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
//
// With this js:
//
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
//
// Will output something like:
// {
// username: "test2"
// emails:
// 0: ".@....com"
// 1: "...@........com"
// profile: Object
// first_name: "..."
// last_name: "..."
// }
//
// So, function below:
var parseForm = function (form) {
var formdata = form.serializeArray();
var data = {};
_.each(formdata, function (element) {
var value = _.values(element);
// Parsing field arrays.
if (value[0].indexOf('[]') > 0) {
var key = value[0].replace('[]', '');
if (!data[key])
data[key] = [];
data[value[0].replace('[]', '')].push(value[1]);
} else
// Parsing nested objects.
if (value[0].indexOf('.') > 0) {
var parent = value[0].substring(0, value[0].indexOf("."));
var child = value[0].substring(value[0].lastIndexOf(".") + 1);
if (!data[parent])
data[parent] = {};
data[parent][child] = value[1];
} else {
data[value[0]] = value[1];
}
});
return data;
};
其他回答
我希望这是最简单的方法。
$("#form").submit(function (e) {
e.preventDefault();
input_values = $(this).serializeArray();
});
$('#myForm').bind('submit', function () {
var elements = this.elements;
});
elements变量将包含表单中的所有输入、选择、文本区域和字段集。
如果你需要从输入中获取多个值,并且你正在使用[]来定义具有多个值的输入,你可以使用以下方法:
$('#contentform').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();
}
data[field.name].push(field.value);
} else {
data[field.name]=field.value;
}
}
});
$('#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+
当我需要对所有表单字段进行ajax调用时,我遇到了:input选择器返回所有复选框的问题,无论它们是否被选中。我添加了一个新的选择器来获得可提交的表单元素:
$.extend($.expr[':'],{
submitable: function(a){
if($(a).is(':checkbox:not(:checked)'))
{
return false;
}
else if($(a).is(':input'))
{
return true;
}
else
{
return false;
}
}
});
用法:
$('#form_id :submitable');
我还没有测试它与多个选择框虽然,但它的工作,以标准提交的方式得到所有的表单字段。
我在OpenCart网站上定制产品选项时使用了这个选项,包括复选框和文本字段以及标准的选择框类型。