使用jQuery获取表单input字段？
我有一个很多input字段的表单。
当我使用jQuery捕获提交表单事件时，是否可以在关联数组中获取该表单的所有input字段？
$('#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>元素上失败。
看起来， 新的HTML 5表单input不能在jQuery版本1.3中的serializeArray中使用。 这适用于版本1.4+
在这个问题上晚会晚了，但这更容易：
$('#myForm').submit(function() { // Get all the forms elements and their values in one step var values = $(this).serialize(); });
jquery.form插件可以帮助别人正在寻找什么，最终在这个问题上。 我不确定它是否直接做你想做的事情。
还有serializeArray函数。
有时我发现一次一个更有用。 为此，有这样的：
var input_name = "firstname"; var input = $("#form_id :input[name='"+input_name+"']");
$('#myForm').bind('submit', function () { var elements = this.elements; });
元素variables将包含表单中的所有input，select，文本区和字段集。
有一个类似的问题，轻微的扭曲，我想我会抛出这个。 我有一个callback函数，获取表单，所以我有一个表单对象已经不能在$('form:input')简单的变种。 相反，我想出了：
var dataValues = {}; form.find('input').each( function(unusedIndex, child) { dataValues[child.name] = child.value; });
其相似但不完全相同的情况，但是我发现这个线程非常有用，并且认为我会把它放在最后，希望别人觉得它有用。
这是另一个解决scheme，这样你可以获取有关表单的所有数据，并在服务器端调用或使用它。
$('.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" ); }); }
希望这对你们任何人都有用处:)
联想？ 不是没有一些工作，但你可以使用通用select器：
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; });
http://api.jquery.com/serializearray/
$('#form').on('submit', function() { var data = $(this).serializeArray(); });
这也可以在没有使用XMLHttpRequest Level 2 FormData对象的情况下完成
http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface
var data = new FormData([form])
不要忘记checkbox和单选button –
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')更改为更具体。
如果您需要从input中获取多个值，并且使用[]来定义具有多个值的input，则可以使用以下内容：
$('#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; } } });
我使用这个代码没有每个循环：
$('.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; });
这段代码将工作，而不是名称，电子邮件input您的表单字段名称
$(document).ready(function(){ $("#form_id").submit(function(event){ event.preventDefault(); var name = $("input[name='name']",this).val(); var email = $("input[name='email']",this).val(); }); });
奇怪的是，没有人提出或提出一个简洁的解决scheme来获取列表数据。 几乎没有任何forms是单维对象。
这个解决scheme的缺点是，你的单例对象将不得不在[0]索引处被访问。 但海事组织比使用其中一种地图制图解决scheme要好得多。
var formData = $('#formId').serializeArray().reduce(function (obj, item) { if (obj[item.name] == null) { obj[item.name] = []; } obj[item.name].push(item.value); return obj; }, {});
当我需要做所有的表单字段的Ajax调用时，我有问题：inputselect器返回所有checkbox，无论他们是否被检查。 我添加了一个新的select器来获取可提交的表单元素：
$.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');
我还没有用多个select框进行testing，但它的工作原理是以标准提交的方式获取所有表单域。
我在OpenCart站点上定制产品选项时使用了这个选项，以包含checkbox和文本字段以及标准select框types。
serialize（）是最好的方法。 @克里斯托弗帕克说，尼克夫的安努克完成更多，但它没有考虑到该表格可能包含textarea和select菜单。 使用serialize（）更好，然后根据需要操作。 来自serialize（）的数据可以在Ajax中使用，也可以在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>
并在您的序列化function：
if(!$(name).prop('ignorar')){ do_your_thing; }
这就是你忽略一些领域的方式。
与nickf给出的解决scheme相同，但考虑了数组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(); } });
受到Lance Rushing和Simon_Weaver的解答 ，这是我最喜欢的解决scheme。
$('#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"}
