使用jQuery获取表单输入字段?

联想?不是没有一些工作，但你可以使用通用选择器:

var items = new Array();


$('#form_id:input').each(function (el) {
items[el.name] = el;
});

$('#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+

$('#myForm').bind('submit', function () {
var elements = this.elements;
});

elements变量将包含表单中的所有输入、选择、文本区域和字段集。

在这个问题上有点晚了，但这个更简单:

$('#myForm').submit(function() {
// Get all the forms elements and their values in one step
var values = $(this).serialize();


});

jquery.form插件可以帮助解决这个问题。我不确定它是否能直接满足你的要求。

还有serializeArray函数。

当我需要对所有表单字段进行ajax调用时，我遇到了:输入选择器返回所有复选框的问题，无论它们是否被选中。我添加了一个新的选择器来获得可提交的表单元素:

$.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网站上定制产品选项时使用了这个选项，包括复选框和文本字段以及标准的选择框类型。

不要忘记复选框和单选按钮-

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

我也遇到过同样的问题，只是用了不同的方法。

var arr = new Array();
$(':input').each(function() {
arr.push($(this).val());
});
arr;

它返回所有输入字段的值。你可以改变$(':input')更具体。

<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:input')上简化变量。相反，我想到了:

    var dataValues = {};
form.find('input').each(
function(unusedIndex, child) {
dataValues[child.name] = child.value;
});

它类似但不完全相同的情况，但我发现这条线索非常有用，我想我会把它塞在末尾，希望其他人也能发现它有用。

jQuery的serializeArray不包括禁用字段，所以如果你也需要这些字段，请尝试:

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
data[field.name] = field.value;
});

Serialize()是最好的方法。@ Christopher Parker说，Nickf的回答实现了更多，但它没有考虑到表单可能包含文本区域和选择菜单。最好使用serialize()，然后根据需要对其进行操作。serialize()中的数据可以在Ajax post或get中使用，因此没有任何问题。

有时我发现一次一个更有用。为此，有这个:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");

如果你需要从输入中获取多个值，并且你正在使用[]来定义具有多个值的输入，你可以使用以下方法:

$('#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;
}
}
});

希望这能帮助到一些人。：）

// 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])

这里有另一种解决方案，通过这种方式，您可以获取关于表单的所有数据，并在服务器端调用或其他地方使用它。

$('.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" );
});
}

希望这对你们任何人都有用:)

所有答案都很好，但如果函数中有一个字段你想忽略?简单，给字段一个属性，例如ignore_this:

<input type="text" name="some_name" ignore_this>

在你的Serialize函数中:

if(!$(name).prop('ignorar')){
do_your_thing;
}

这是忽略某些字段的方法。

我使用这段代码没有每个循环:

$('.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;
});

似乎很奇怪，没有人赞成或提出一个简洁的解决方案来获得列表数据。几乎没有任何形式是一维对象。

当然，这种解决方案的缺点是必须在[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;
}, {});

这段代码将工作 电子邮件输入您的表单字段名称

$(document).ready(function(){
$("#form_id").submit(function(event){
event.preventDefault();
var name = $("input[name='name']",this).val();
var email = $("input[name='email']",this).val();
});
});

受到兰斯冲和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"}

我希望这是最简单的方法。

 $("#form").submit(function (e) {
e.preventDefault();
input_values =  $(this).serializeArray();
});

试试下面的代码:

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)
});