如何使用 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;
});
使用 $('form').serializeArray()，它返回一个 array：
[
{"name":"foo","value":"1"},
{"name":"bar","value":"xxx"},
{"name":"this","value":"hi"}
]
其他选项是 $('form').serialize()，它返回一个 字符串：
"foo=1&bar=xxx&this=hi"
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"
_.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))
2014 年更新答案：HTML5 FormData 这样做
var formData = new FormData(document.querySelector('form'))
然后，您可以按原样发布 formData - 它包含表单中使用的所有名称和值。
formData.get('something')
基于 jQuery.serializeArray，返回键值对。
var data = $('#form').serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
document.querySelector('form').addEventListener('submit', (e) => {
const formData = new FormData(e.target);
// Now you can use formData.get('foo'), for example.
// Don't forget e.preventDefault() if you want to stop normal form .submission
});
这是一个挑剔的答案，但让我解释一下为什么这是一个更好的解决方案：
我们正在正确处理表单提交而不是按钮按下。有些人喜欢在字段上按输入。有些人使用替代输入设备，例如语音输入或其他辅助设备。处理表单提交，您可以为每个人正确解决它。
我们正在挖掘提交的实际表单的表单数据。如果您稍后更改表单选择器，则不必更改所有字段的选择器。此外，您可能有多个具有相同输入名称的表单。无需消除过多 ID 的歧义，只需根据提交的表单跟踪输入。如果适合您的情况，这还使您能够对多个表单使用单个事件处理程序。
FormData 接口是相当新的，但浏览器很好地支持。这是构建数据收集以获取表单中内容的真实价值的好方法。没有它，您将不得不遍历所有元素（例如使用 form.elements）并找出检查的内容，未检查的内容，值是什么等。如果您需要旧的浏览器支持，则完全有可能，但 FormData 接口更简单。
我在这里使用 ES6... 无论如何都不是必需的，所以如果您需要旧的浏览器支持，请将其改回 ES5 兼容。
现在是 2019 年，有更好的方法来做到这一点：
const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());
或者如果你想要一个普通的对象
const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());
尽管请注意，这不适用于重复键，例如从具有相同名称的多选和重复复选框中获得的重复键。
最简单的方法，2022。
document.querySelector('form').addEventListener('submit', (e) => {
const data = Object.fromEntries(new FormData(e.target).entries());
console.log(data)
});
输出
{ name: 'Stackoverflow' }
e.target.toJson()~
使用 .serializeArray() 获取数组格式的数据，然后将其转换为对象：
function getFormObj(formId) {
var formObj = {};
var inputs = $('#'+formId).serializeArray();
$.each(inputs, function (i, input) {
formObj[input.name] = input.value;
});
return formObj;
}
这是一个非常简单且简短的解决方案，甚至不需要 Jquery。
var formElements=document.getElementById("myForm").elements;
var postData={};
for (var i=0; i<formElements.length; i++)
if (formElements[i].type!="submit")//we dont want to include the submit-buttom
postData[formElements[i].name]=formElements[i].value;
postData 的选项。
我用这个：
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();
$("#form input, #form select, #form textarea").each(function() {
data[theFieldName] = theFieldValue;
});
除此之外，您可能还想查看 serialize()；
这是一个仅适用于 JavaScript 的实现，可以正确处理复选框、单选按钮和滑块（可能还有其他输入类型，但我只测试了这些）。
function setOrPush(target, val) {
var result = val;
if (target) {
result = [target];
result.push(val);
}
return result;
}
function getFormResults(formElement) {
var formElements = formElement.elements;
var formParams = {};
var i = 0;
var elem = null;
for (i = 0; i < formElements.length; i += 1) {
elem = formElements[i];
switch (elem.type) {
case 'submit':
break;
case 'radio':
if (elem.checked) {
formParams[elem.name] = elem.value;
}
break;
case 'checkbox':
if (elem.checked) {
formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
}
break;
default:
formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
}
}
return formParams;
}
工作示例：
函数 setOrPush(target, val) { var result = val;如果（目标）{结果=[目标]；结果.push(val); } 返回结果； } 函数 getFormResults(formElement) { var formElements = formElement.elements; var formParams = {};变量 i = 0;变量元素=空； for (i = 0; i < formElements.length; i += 1) { elem = formElements[i]; switch (elem.type) { case 'submit': break; case 'radio': if (elem.checked) { formParams[elem.name] = elem.value; } 休息; case 'checkbox': if (elem.checked) { formParams[elem.name] = setOrPush(formParams[elem.name], elem.value); } 休息;默认值：formParams[elem.name] = setOrPush(formParams[elem.name], elem.value); } } 返回表单参数； } // // 运行代码片段/表单的样板 // function ok() { var params = getFormResults(document.getElementById('main_form')); document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' '); } (function() { var main_form = document.getElementById('main_form'); main_form.addEventListener('submit', function(event) { event.preventDefault(); ok(); }, false); })() ;
编辑：
如果您正在寻找更完整的实现，请查看 this section of the project I made this for。我最终会用我想出的完整解决方案来更新这个问题，但也许这会对某人有所帮助。
我已经包含了答案，以还回所需的对象。
function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};
$.map(rawJson, function (n, i) {
model[n['name']] = n['value'];
});
return model;
}
foo[bar][] = 'qux' 应序列化为 { foo: { bar: [ 'qux' ] } }。
如果您使用的是 jQuery，这里有一个小函数可以满足您的需求。
首先，在你的表单中添加一个 ID（除非它是页面上唯一的表单，那么你可以使用 'form' 作为 dom 查询）
<form id="some-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>
<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
var out = {};
var s_data = $(dom_query).serializeArray();
//transform into simple data/value object
for(var i = 0; i<s_data.length; i++){
var record = s_data[i];
out[record.name] = record.value;
}
return out;
}
console.log(getFormData('#some-form'));
</script>
输出如下所示：
{
"foo": "1",
"bar": "xxx",
"this": "hi"
}
基于神经元的响应，我创建了一个简单的 JQuery 方法，它以键值对的形式获取表单数据，但它适用于多选和 name='example[]' 的数组输入。
这是它的使用方式：
var form_data = $("#form").getFormObject();
您可以在下面找到其定义及其工作原理的示例。
// 函数开始 $.fn.getFormObject = function() { var object = $(this).serializeArray().reduce(function(obj, item) { var name = item.name.replace("[]", " "); if ( typeof obj[name] !== "undefined" ) { if ( !Array.isArray(obj[name]) ) { obj[name] = [ obj[name], item.value ]; } else { obj[name].push(item.value); } } else { obj[name] = item.value; } return obj; }, {});返回对象； } // 函数结束 // 这是它的使用方式 $("#getObject").click( function() { var form_data = $("#form").getFormObject(); console.log(form_data); }) ; /* 只是为了让视图更好;) */ #getObject { padding: 10px;光标：指针；背景：#0098EE；白颜色;显示：内联块； }
您还可以使用 FormData 对象； FormData 对象允许您编译一组键/值对以使用 XMLHttpRequest 发送。它主要用于发送表单数据，但可以独立于表单使用以传输键控数据。
var formElement = document.getElementById("myform_id");
var formData = new FormData(formElement);
console.log(formData);
这会将所有表单字段附加到 JavaScript 对象“res”：
var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
res[obj.name] = $(obj).val();
})
var formData = new FormData($('#form-id'));
params = $('#form-id').serializeArray();
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
对于那些更喜欢 Object 而不是序列化字符串（如 $(form).serialize() 返回的字符串，并且对 $(form).serializeArray() 略有改进）的人，请随意使用以下代码：
var Form = {
_form: null,
_validate: function(){
if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
if(!this._form.elements.length) return false;
return true;
}, _loopFields: function(callback){
var elements = this._form.elements;
for(var i = 0; i < elements.length; i++){
var element = form.elements[i];
if(name !== ""){
callback(this._valueOfField(element));
}
}
}, _valueOfField: function(element){
var type = element.type;
var name = element.name.trim();
var nodeName = element.nodeName.toLowerCase();
switch(nodeName){
case "input":
if(type === "radio" || type === "checkbox"){
if(element.checked){
return element.value;
}
}
return element.value;
break;
case "select":
if(type === "select-multiple"){
for(var i = 0; i < element.options.length; i++){
if(options[i].selected){
return element.value;
}
}
}
return element.value;
break;
case "button":
switch(type){
case "reset":
case "submit":
case "button":
return element.value;
break;
}
break;
}
}, serialize: function(form){
var data = {};
this._form = form;
if(this._validate()){
this._loopFields(function(value){
if(value !== null) data[name] = value;
});
}
return data;
}
};
要执行它，只需使用 Form.serialize(form)，该函数将返回一个类似于此的 Object：
<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">
作为奖励，这意味着您不必为一个序列化函数安装整个 jQuery 包。
return true 的 _validate 方法中有错误...。
我写了一个库来解决这个问题：JSONForms。它采用一个表单，遍历每个输入并构建一个您可以轻松阅读的 JSON 对象。
假设您有以下表格：
<form enctype='application/json'>
<input name='places[0][city]' value='New York City'>
<input type='number' name='places[0][population]' value='8175133'>
<input name='places[1][city]' value='Los Angeles'>
<input type='number' name='places[1][population]' value='3792621'>
<input name='places[2][city]' value='Chicago'>
<input type='number' name='places[2][population]' value='2695598'>
</form>
将表单传递给 JSONForms 的 encode 方法会返回以下对象：
{
"places": [
{
"city": "New York City",
"population": 8175133
},
{
"city": "Los Angeles",
"population": 3792621
},
{
"city": "Chicago",
"population": 2695598
}
]
}
这是您的表单的 demo。
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
if(indexed_array[n['name']] == undefined){
indexed_array[n['name']] = [n['value']];
}else{
indexed_array[n['name']].push(n['value']);
}
});
return indexed_array;
}
您可以使用 this function 从表单中获取对象或 JSON。
使用它：
var object = formService.getObjectFormFields("#idform");
function getObjectFormFields(formSelector) { ///
$( "form" ).bind( "submit", function(e) { e.preventDefault(); console.log( $(this).serializeObject() ); //console.log( $(this).serialize () ); //console.log( $(this).serializeArray() ); }); $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each( a, function() { if ( o[this.name] !== undefined) { if ( !o[this.name].push ) { o[this.name] = [o[this.name ]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } });返回 o; };
我有点惊讶，因为没有人提到下面的解决方案。
通过 document.forms.namedItem 函数获取表单数据
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
var oData = new FormData(form);
}
HT
<form name="fileinfo">
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>File to stash:</label>
<input type="file" name="file" required />
<input type="submit" value="Stash the file!" />
</form>
<div></div>
我编写了一个处理多个复选框和多个选择的函数。在这些情况下，它返回一个数组。
function getFormData(formId) {
return $('#' + formId).serializeArray().reduce(function (obj, item) {
var name = item.name,
value = item.value;
if (obj.hasOwnProperty(name)) {
if (typeof obj[name] == "string") {
obj[name] = [obj[name]];
obj[name].push(value);
} else {
obj[name].push(value);
}
} else {
obj[name] = value;
}
return obj;
}, {});
}
显示表单输入元素字段和输入文件以在不刷新页面的情况下提交表单并获取包含文件的所有值
$('#imageUploadForm').on('submit',(function(e) { fname = $('#fname').val(); lname = $('#lname').val(); 地址 = $('#address').val(); phoneno = $('#phoneno').val(); file = $('#file').val(); e.preventDefault(); var formData = new FormData(this); formData.append('file', $('#file')[0]); formData.append('fname',$('#fname').val()); formData.append( 'lname',$('#lname').val()); formData.append('phoneno',$('#phoneno').val()); formData.append('address',$('# address').val()); $.ajax({ type:'POST', url: "test.php", //url: '' , data:formData, cache:false, contentType: false, processData: false, success:function(data) { alert('Data with file is submit !'); } }); }))
$(form).serializeArray().reduce(function (obj, item) {
if (obj[item.name]) {
if ($.isArray(obj[item.name])) {
obj[item.name].push(item.value);
} else {
var previousValue = obj[item.name];
obj[item.name] = [previousValue, item.value];
}
} else {
obj[item.name] = item.value;
}
return obj;
}, {});
它将解决问题：无法与多选一起使用。
这是我在香草 JS 中的版本（在 Chrome 上测试）
适用于：
名称="输入"
name="form[name]" （创建一个对象）
name="checkbox[]" （用数组创建一个对象）
name="form[checkbox][]" （创建一个数组）
name="form[select][name]" （创建一个对象，其对象只包含选定的值）
/**
* Get the values from a form
* @param formId ( ID without the # )
* @returns {object}
*/
function getFormValues( formId )
{
let postData = {};
let form = document.forms[formId];
let formData = new FormData( form );
for ( const value of formData.entries() )
{
let container = postData;
let key = value[0];
let arrayKeys = key.match( /\[[\w\-]*\]/g ); // Check for any arrays
if ( arrayKeys !== null )
{
arrayKeys.unshift( key.substr( 0, key.search( /\[/ ) ) ); // prepend the first key to the list
for ( let i = 0, count = arrayKeys.length, lastRun = count - 1; i < count; i++ )
{
let _key = arrayKeys[i];
_key = _key.replace( "[", '' ).replace( "]", '' ); // Remove the brackets []
if ( _key === '' )
{
if ( ! Array.isArray( container ) )
{
container = [];
}
_key = container.length;
}
if ( ! (_key in container) ) // Create an object for the key if it doesn't exist
{
if ( i !== lastRun && arrayKeys[i + 1] === '[]' )
{
container[_key] = [];
}
else
{
container[_key] = {};
}
}
if ( i !== lastRun ) // Until we're the last item, swap container with it's child
{
container = container[_key];
}
key = _key;
}
}
container[key] = value[1]; // finally assign the value
}
return postData;
}
你们都不完全正确。你不能写：
formObj[input.name] = input.value;
因为这样如果你有多选列表 - 它的值将被最后一个覆盖，因为它被传输为：“param1”：“value1”，“param1”：“value2”。
所以，正确的做法是：
if (formData[input.name] === undefined) {
formData[input.name] = input.value;
}
else {
var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
$.merge(inputFieldArray, [input.value]);
formData[input.name] = $.merge([], inputFieldArray);
}
这种方法应该可以做到。它序列化表单数据，然后将它们转换为对象。还负责处理复选框组。
function getFormObj(formId) {
var formParams = {};
$('#' + formId)
.serializeArray()
.forEach(function(item) {
if (formParams[item.name]) {
formParams[item.name] = [formParams[item.name]];
formParams[item.name].push(item.value)
} else {
formParams[item.name] = item.value
}
});
return formParams;
}
serializeArray返回一个带有键值对的对象，它会更有用name="multiple[]"的多个输入不起作用。 POST 方法的解决方案是相同的，只需使用 $('form').serialize()。此外，POST 方法不像 GET 在大多数浏览器中那样有 2000 个字符的限制，因此即使是非常大的数据也可以使用。name属性。