jQuery从表单字段创建对象

如何使用表单的字段和值创建对象？

像这个：

{ fields: { name: 'foo', email: '[e-mail]', comment: 'wqeqwtwqtqwtqwet' } } 

假设表单看起来像这样：

 
   wqeqwtwqtqwtqwet  

我需要知道如何为任何具有单一function的表单执行此操作，而不仅仅是特定的表单。

Answer 1

你可以这样做：

 var fields = {}; $("#theForm").find(":input").each(function() { // The selector will match buttons; if you want to filter // them out, check `this.tagName` and `this.type`; see // below fields[this.name] = $(this).val(); }); var obj = {fields: fields}; // You said you wanted an object with a `fields` property, so... 

请注意，表单可以包含具有重复名称的字段，并且您尝试执行的操作不支持该字段。 此外，HTML表单中的字段顺序可能很重要。 （这些都是serializeArray以它的方式工作的原因。）

请注意，普通的HTML实践是省略禁用的字段。 如果你想这样做，请在获取值之前检查this.disabled 。

---

请注意，上面（两年前写的）使用了一个jQuery伪选择器。 发现我写的那些，我有点惊讶。 正如它在:input伪选择器的文档中所说，使用它意味着jQuery无法将选择器交给浏览器的本机querySelectorAll （几乎所有浏览器现在都有）。

现在我可能会写：

 $("#theForm").find("input, textarea, select, button")... 

…如果我想要按钮，或者如果不是那么

 $("#theForm").find("input, textarea, select")... 

…然后过滤掉input[type="button"]并在each input[type="submit"] 。 例如（根本没有按钮）：

 $("#theForm").find("input, textarea, select").each(function() { var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase(); if (inputType !== "BUTTON" && inputType !== "SUBMIT") { // ...include it, either it's an `input` with a different `type` // or it's a `textarea` or a `select`... } }); 

Answer 2

 var inputs = $("form :input"); var obj = $.map(inputs, function(x, y) { return { Key: x.name, Value: $(x).val() }; }); console.log(obj); 

Answer 3

根据http://api.jquery.com/serializeArray/页面上的评论，您可以执行以下操作：

 (function( $ ){ $.fn.serializeJSON=function() { var json = {}; jQuery.map($(this).serializeArray(), function(n, i){ json[n['name']] = n['value']; }); return json; }; })( jQuery ); 

然后做：

 var obj = $('form').serializeJSON(); 

或者如果你需要使用fields属性，你可以修改函数或执行以下操作：

 var obj = {fields: $('form').serializeJSON()}; 

或者，如果您不介意输出格式，可以使用serializeArray() 。

Answer 4

jquery在$（’＃myform’）之类的froms上有一个serialize（）函数.serialize（）

这是你要找的？

更新：oops，也许尝试使用serializeArray（），它应该给你一个名称和值的数组。

Answer 5

 function formsToObj(){ var forms = []; $('form').each(function(i){ forms[i] = {}; $(this).children('input,textarea,select').each(function(){ forms[i][$(this).attr('name')] = $(this).val(); }); }); return forms; } 

它是一个通用函数，可以为页面中的每个表单创建一个对象

Answer 6

这样，您可以从多个选项或复选框组中捕获所有值

 function form2obj(form) { var arr = $(form).serializeArray(), obj = {}; for(var i = 0; i < arr.length; i++) { if(obj[arr[i].name] === undefined) { obj[arr[i].name] = arr[i].value; } else { if(!(obj[arr[i].name] instanceof Array)) { obj[arr[i].name] = [obj[arr[i].name]]; } obj[arr[i].name].push(arr[i].value); } } return obj; }; 

Answer 7

这是一个简单的解决方案：

见演示

 $(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;}); 

Answer 8

所以我总是尝试在表单提交中添加一个包装器。

这对于在ajax上运行的表单提交尤其重要。

首先要做的是抓取提交表单。

 $(".ajax-form").submit(function(){ var formObject = objectifyForm($(this).serializeArray()); // Do stuff with formObject // always add return false to stop the form from actually doing a post anywhere return false; }); 

这将包装任何具有“ajax-form”类的表单，并将serializeArray发送到一个名为objectify form的函数，该函数将返回该表单的所有值的对象。

 function objectifyForm(formArray) { returnArray = {}; for (var i = 0; i < formArray.length; i++) { returnArray[formArray[i]['name']] = formArray[i]['value']; } return returnArray; } 

Answer 9

简单的表单代码

 
    Enter Your Message Her  

Javascript代码：

 var data = {}; var element = document.getElementById("form").elements for (var i = 0; i < element.length; i++) { switch (element[i].type) { case "text": data[element[i].name] = element[i].value; break; case "checkbox": data[element[i].name] = element[i].checked; break; case "password": data[element[i].name] = element[i].checked; break; case "textarea": data[element[i].name] = element[i].value; break; } }