我有一个包含许多输入字段的表单。
当我使用 jQuery 捕获提交表单事件时，是否可以在关联数组中获取该表单的所有输入字段？
【问题讨论】：
标签： javascript jquery
$('#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;
});
请注意，此 sn-p 将在 <select multiple> 元素上失败。
在 jQuery 1.3 版中，new HTML 5 form inputs 似乎不适用于 serializeArray。这适用于版本 1.4+
【讨论】：
在这个问题上迟到了，但这更容易：
$('#myForm').submit(function() {
// Get all the forms elements and their values in one step
var values = $(this).serialize();
});
【讨论】：
.serialize() (api.jquery.com/serialize) 将表单的所有元素放在一个字符串中，以便在查询字符串中附加到 URL，本质上是模仿 GET 表单请求.这不会完成 nickf 的答案所完成的。
.serialize() 也适用于表单元素。所以$('form select').serialize() 将只为选择序列化数据。
$('#myForm')，不如使用$(this)。
jquery.form 插件可能有助于解决其他人正在寻找的最终结果。我不确定它是否直接做你想要的。
还有serializeArray函数。
【讨论】：
有时我发现一次获得一个更有用。为此，有这样的：
var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");
【讨论】：
[0].value 附加到此，即$(...)[0].value; 直接给了我输入的值，谢谢！
这是另一种解决方案，通过这种方式，您可以获取有关表单的所有数据并将其用于服务器端调用或其他内容。
$('.form').on('submit', function( e )){
var form = $( this ), // this will resolve to the form submitted
action = form.attr( 'action' ),
type = form.attr( 'method' ),
data = {};
// Make sure you use the 'name' field on the inputs you want to grab.
form.find( '[name]' ).each( function( i , v ){
var input = $( this ), // resolves to current input element.
name = input.attr( 'name' ),
value = input.val();
data[name] = value;
});
// Code which makes use of 'data'.
e.preventDefault();
}
然后您可以将其与 ajax 调用一起使用：
function sendRequest(action, type, data) {
$.ajax({
url: action,
type: type,
data: data
})
.done(function( returnedHtml ) {
$( "#responseDiv" ).append( returnedHtml );
})
.fail(function() {
$( "#responseDiv" ).append( "This failed" );
});
}
希望这对你们任何人都有用:)
【讨论】：
$('#myForm').bind('submit', function () {
var elements = this.elements;
});elements 变量将包含表单中的所有输入、选择、文本区域和字段集。
【讨论】：
这段代码可以工作 代替姓名，电子邮件输入您的表单字段名称
$(document).ready(function(){
$("#form_id").submit(function(event){
event.preventDefault();
var name = $("input[name='name']",this).val();
var email = $("input[name='email']",this).val();
});
});
【讨论】：
有一个类似的问题，有点扭曲，我想我会把它扔掉。我有一个获取表单的回调函数，所以我已经有了一个表单对象，并且无法在$('form:input') 上轻松变体。相反，我想出了：
var dataValues = {};
form.find('input').each(
function(unusedIndex, child) {
dataValues[child.name] = child.value;
});
它的情况相似但不完全相同，但我发现这个线程非常有用，我想我会把它放在最后，希望其他人觉得它有用。
【讨论】：
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])
【讨论】：
联想？并非没有一些工作，但您可以使用通用选择器：
var items = new Array();
$('#form_id:input').each(function (el) {
items[el.name] = el;
});
【讨论】：
jQuery 的 serializeArray 不包括禁用字段，所以如果你也需要这些，请尝试：
var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
data[field.name] = field.value;
});
【讨论】：
不要忘记复选框和单选按钮 -
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
【讨论】：
似乎很奇怪，没有人赞成或提出获取列表数据的简洁解决方案。几乎没有任何形式会成为一维对象。
当然，此解决方案的缺点是您的单例对象必须在 [0] 索引处访问。但是 IMO 这比使用十几种线映射解决方案中的一种要好得多。
var formData = $('#formId').serializeArray().reduce(function (obj, item) {
if (obj[item.name] == null) {
obj[item.name] = [];
}
obj[item.name].push(item.value);
return obj;
}, {});
【讨论】：
我遇到了同样的问题并以不同的方式解决了它。
var arr = new Array();
$(':input').each(function() {
arr.push($(this).val());
});
arr;
它返回所有输入字段的值。您可以将$(':input') 更改为更具体。
【讨论】：
与 nickf 给出的解决方案相同，但考虑了数组输入名称 例如
<input type="text" name="array[]" />
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();
}
});
【讨论】：
我希望这是有帮助的，也是最简单的。
$("#form").submit(function (e) {
e.preventDefault();
input_values = $(this).serializeArray();
});
【讨论】：
如果您需要从输入中获取多个值，并且您使用 [] 来定义具有多个值的输入，则可以使用以下命令：
$('#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;
}
}
});
【讨论】：
受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"}
【讨论】：
我正在使用没有每个循环的代码：
$('.subscribe-form').submit(function(e){
var arr=$(this).serializeArray();
var values={};
for(i in arr){values[arr[i]['name']]=arr[i]['value']}
console.log(values);
return false;
});
【讨论】：
当我需要对所有表单字段进行 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 网站上的产品选项以包括复选框和文本字段以及标准选择框类型时使用它。
【讨论】：
serialize() 是最好的方法。 @Christopher Parker 说 Nickf 的 anwser 做得更多，但是它没有考虑到表单可能包含 textarea 和选择菜单。使用 serialize() 然后根据需要对其进行操作要好得多。来自serialize() 的数据可以在Ajax post 或get 中使用，所以没有问题。
【讨论】：
希望这对某人有所帮助。 :)
// 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;
};
【讨论】：
所有答案都很好，但是如果您想在该函数中忽略某个字段？简单，给字段一个属性，例如ignore_this：
<input type="text" name="some_name" ignore_this>
在你的序列化函数中：
if(!$(name).prop('ignorar')){
do_your_thing;
}
这就是你忽略某些字段的方式。
【讨论】：
$('.mandatory'); 和!$('.mandatory');
ignore_this 更改为 data-ignore-this="true" 而不是创建自己的不验证 w3c 的属性
试试下面的代码：
jQuery("#form").serializeArray().filter(obje =>
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")
【讨论】：
对于多个选择元素 (<select multiple="multiple">)，我修改了来自 @Jason Norwood-Young 的解决方案以使其正常工作。
答案（如已发布）仅从被选择的第一个元素中获取值，而不是所有元素。它也没有初始化或返回data，前者抛出了一个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'))
注意：您只需要确保您选择的name 在其末尾附加了[]，例如：
<select name="favorite_colors[]" multiple="multiple">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
【讨论】：
$("#form-id").submit(function (e) {
e.preventDefault();
inputs={};
input_serialized = $(this).serializeArray();
input_serialized.forEach(field => {
inputs[field.name] = field.value;
})
console.log(inputs)
});
【讨论】：