如何使用JavaScript/jQuery获取表单数据?

是否有一种简单的单行方式来获取表单的数据，就像以经典的仅html方式提交表单一样?

例如:

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

输出:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

像这样的东西太简单了，因为它没有(正确地)包括文本区域，选择，单选按钮和复选框:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

当前回答

最简单的方法是2022年。

document.querySelector('form').addEventListener('submit', (e) => {
  const data = Object.fromEntries(new FormData(e.target).entries());
  console.log(data)
});

输出

{ name: 'Stackoverflow' }

2021-04-23 15:56:46

其他回答

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

2016-02-01 13:22:21

使用$('form').serializeArray()，它返回一个数组:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

另一个选项是$('form').serialize()，它返回一个字符串:

"foo=1&bar=xxx&this=hi"

看看这个jsfiddle演示

2011-12-03 05:52:48

使用.serializeArray()获取数组格式的数据，然后将其转换为对象:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

2013-11-14 06:22:59

我用这个:

jQuery插件

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML表单

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

获取数据

var myData = $("#myForm").getFormData();

2016-08-24 13:03:36

这将把所有表单字段附加到JavaScript对象“res”:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

2013-09-03 15:41:49

如何使用JavaScript/jQuery获取表单数据?

推荐文章

最新文章

标签