我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
当前回答
不要忘记复选框和单选按钮-
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
其他回答
受到Lance Rushing和Simon_Weaver回答的启发,这是我最喜欢的解决方案。
$('#myForm').submit( function( event ) {
var values = $(this).serializeArray();
// In my case, I need to fetch these data before custom actions
event.preventDefault();
});
输出是一个对象数组,例如。
[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]
使用下面的代码,
var inputs = {};
$.each(values, function(k, v){
inputs[v.name]= v.value;
});
它的最终输出将是
{"start-time":"11:01", "end-time":"11:01"}
希望这能帮助到一些人。:)
// 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;
};
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])
jquery。表单插件可能会帮助其他人在这个问题上寻找什么。我不确定它是否能直接满足你的要求。
还有serializeArray函数。
对于多个选择元素(<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>