23

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

像这个：

{
  fields:
   {
      name: 'foo',
      email: 'foo@moo.com',
      comment: 'wqeqwtwqtqwtqwet'     

   }
}

假设表格如下所示：

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="foo@moo.com" />
  <textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>

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

4

11 回答 11

39

你可以这样做：

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 伪选择器。我有点惊讶地发现我写了那个。正如它在pseudo-selector的文档中:input所说的那样，使用它意味着 jQuery 不能将选择器交给浏览器的本机querySelectorAll（现在几乎所有浏览器都有）。

现在我可能会写：

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

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

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

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

$("#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`...
    }
});
于 2011-04-09T05:41:45.200 回答
11 
var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
    return {
        Key: x.name,
        Value: $(x).val()
    };
});
console.log(obj);
于 2011-04-09T05:38:53.467 回答
6

根据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()或者，如果您不介意这种输出格式，也可以使用。

于 2011-04-09T05:43:39.703 回答
4

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

See Demo

$(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;});
于 2018-04-09T08:54:16.617 回答
3

jquery 在像 $('#myform').serialize() 这样的 froms 上有一个 serialize() 函数

这是你要找的吗？

更新：哎呀，也许尝试 serializeArray() 代替，它应该给你一个名称和值的数组。

于 2011-04-09T05:37:38.047 回答
1 
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;
}

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

于 2011-04-09T05:40:20.573 回答
1

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

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;
};
于 2016-03-31T01:54:20.337 回答
1

许多复杂的方法在某些情况下不起作用。同时，您可以使用 FormData

 var fields = {};
 var myform = document.getElementById('ThisIsTheIDOfMyForm');
 var myformdata = new FormData(myform);
 for (var [key, value] of myformdata.entries()) { 
    fields[key] = value;
 }
 console.log(fields);

正是你想要的。它处理一切。

于 2018-12-13T13:57:42.917 回答
0

所以我总是尝试在表单提交之间放置一个包装器。

这对于通过 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;
}
于 2014-07-23T15:14:54.120 回答
0

简单的表单代码

<form id="myForm" name="myForm">
    <input type="text" name="email" value="fazelman@test.com"/>
    <input type="checkbox" name="gender">
    <input type="password" name="pass" value="123"/>
    <textarea name="message">Enter Your Message Her</textarea>
</form>

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;
    }
}
于 2017-01-15T11:47:01.917 回答
0

如果您想保留任何多余的元素选择器，您可以FormData从提交事件处理函数中访问。下面的代码片段将打印出来 带有 searchTerm 和 includeBananas 的对象。

function submitForm(formElement) {
  const formData = new FormData(formElement)
  const allEntries = [...formData.entries()]
    .reduce((all, entry) => {
      all[entry[0]] = entry[1]
      return all
    }, {})
  console.log(allEntries)
  return false;
}
<form onsubmit="return submitForm(this)">
  <input name="searchTerm">
  <input name="includeBananas" type="checkbox">
  <button>Submit</button>
</form>

编辑：我发现这缺少一件事：FormData 可以为同一个键保存多个值。在这种情况下，您需要类似的东西

const allEntries = [...form_data.keys()].reduce((all, form_key) => {
    all[form_key] = form_data.getAll(form_key)
    return all
}, {})
于 2019-07-15T22:28:31.760 回答