jQuery从表单字段创建对象

问题描述

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

像这样：

字段：
 {
名称：'foo'，
电子邮件：'[email protected]'，
评论：'wqeqwtwqtqwtqwet'
 
} 
} 
  

假设表单看起来像这样：

 < form> 
< input type =textname =namevalue =foo/> 
< input type =textname =emailvalue [email protected]/> 
< textarea name =comment> wqeqwtwqtqwtqwet< / textarea> 
< / form> 
  

我需要知道如何为单个函数执行此操作，而不仅仅是特定

解决方案

您可以做到这一点：

  var fields = {}; 
 $（＃theForm）。find（：input）。each（function（）{
 //选择器将匹配按钮;如果要过滤
 // // out，检查`this.tagName`和`this.type`;见
 //在
字段下面[this.name] = $（this）.val（）; 
}）; 
 var obj = {fields：fields}; //你说你想要一个带有`fields`属性的对象，所以... 
  

当心表单可以包含重复名称的字段，而您尝试执行的操作不支持该字段。另外，HTML表单中的次序字段可能很重要。 （这些都是起作用的原因它的方式。）

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

---

请注意，上面（两年前编写）使用jQuery伪选择器。我有点惊讶地发现我写了这个。正如，使用它意味着jQuery无法将选择器切换到浏览器的本地 querySelectorAll （几乎所有浏览器现在都有）。

现在我可能会写：

  $（＃theForm）。 find（input，textarea，select，button）... 
  

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

  $（＃theForm）。find（input，textarea，select）.. 。
  

...然后过滤掉 input [type =button ] 和输入[type =submit] 在每个中。例如。 （没有按钮）：

  $（＃theForm）。find（input，textarea，select）。 each（function（）{
 var inputType = this.tagName.toUpperCase（）===INPUT&&&& this.type.toUpperCase（）; 
 if（inputType！==BUTTON && inputType！==SUBMIT）{
 // ...包括它，或者是一个带有不同`type`的输入`
 //或者它是`textarea`或`select` ... 
} 
}）; 
  

How can I create a object with a form's fields and values?

like this one:

{
  fields:
   {
      name: 'foo',
      email: '[email protected]',
      comment: 'wqeqwtwqtqwtqwet'

   }
}

assuming the form looks like this:

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="[email protected]" />
  <textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>

I need to know how can I do this for any form with a single function, not just a particular form.

解决方案

You can do this:

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

Beware that forms can have fields with repeated names, and what you're trying to do doesn't support that. Also, the order of fields in HTML forms can be significant. (These are both reasons that serializeArray works the way it does.)

Note that normal HTML practice is to omit disabled fields. If you want to do that, check this.disabled before grabbing the value as well.

---

Note that the above (written two years ago) uses a jQuery pseudo-selector. I'm a bit surprised to find that I wrote that. As it says in the documentation for the :input pseudo-selector, using it means that jQuery can't hand off the selector to the browser's native querySelectorAll (which nearly all browsers now have).

Nowadays I'd probably write:

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

...if I wanted buttons, or if not then

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

...and then filter out input[type="button"] and input[type="submit"] inside the each. E.g. (no buttons at all):

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

这篇关于jQuery从表单字段创建对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！