jquery从表单字段创建对象

Question

如何创建一个具有表单字段和值的对象？

就像这个：

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

   }
}

填充表格看起来像这样：

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="[email protected]" />
  <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...

beware表格可以具有带有重复名称的字段，而您要做的事情并不支持。同样，HTML形式中字段的

顺序可能很重要。 （这都是serializeArray

的原因。））

注意，正常的HTML练习是省略残障字段。如果您想这样做，请在抓取值之前检查

this.disabled。

注意，上面的（两年前写）使用了一个伪伪选择。我很惊讶地发现我写了这篇文章。正如它在

:input

伪selector

的

---

文档中所说的那样，使用它意味着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`...
    }
});

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

Answer 2

http：//api.jquery.com/serializearray/

页面上，您可以做：

Answer 3

然后做： var obj = $('form').serializeJSON();

或如果您需要使用

fields

属性，则可以修改该功能或执行此操作：

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

，或者只需使用

serializeArray()

如果您不介意这种输出格式。

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

看到演示

Answer 4

jquery具有serialize（）函数。 $（'＃myform'）。序列化（） 这是您想要的？ update： 糟糕，也许尝试serializearray（），它应该给您一个名称和价值的数组。

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 5

它是一个广义函数，为您的页面中的每种表单创建一个对象

这种方式从多个选择或组成的组中捕获所有值

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 6

在某些情况下，许多复杂的方式不起作用。 同时，您可以使用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);

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

Answer 7

因此，我总是试图在表格提交中放置包装。

对于在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;
});

Answer 8

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

simple表单代码

<form id="myForm" name="myForm">
    <input type="text" name="email" value="[email protected]"/>
    <input type="checkbox" name="gender">
    <input type="password" name="pass" value="123"/>
    <textarea name="message">Enter Your Message Her</textarea>
</form>

Answer 9

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;
    }
}

如果您要省去任何冗余元素选择器，则可以从提交事件处理程序功能中访问

FormData

。以下代码段将打印出来

.

Answer 10

function submitForm(formElement) {
  const obj = Object.fromEntries(new FormData(formElement))
  console.log(obj)
  return false;
}

<form onsubmit="return submitForm(this)">
  <input name="searchTerm">
  <input name="includeBananas" type="checkbox">
  <button>Submit</button>
</form>

Edit：

Answer 11

const allEntries = [...form_data.keys()].reduce((all, form_key) => {
    all[form_key] = form_data.getAll(form_key)
    return all
}, {})