jQuery从表单字段创建对象

Question

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

像这个:

{
  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>

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

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"]和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`...
    }
});

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()如果您不介意输出格式,则可以使用.