如何使用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> 

date：

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

像这样的东西太简单了，因为它没有（正确）包括textareas，select，单选button和checkbox：

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

Answer 1

 $('form').serialize() //this produces: "foo=1&bar=xxx&this=hi" 

演示

Answer 2

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

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

其他选项是$('form').serialize() ，它返回一个string ：

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

看看这个jsfiddle演示

Answer 3

基于jQuery.serializeArray ，返回键值对。

 var data = $('#form').serializeArray().reduce(function(obj, item) { obj[item.name] = item.value; return obj; }, {}); 

Answer 4

更新2014年的答案： HTML5 FormData做到这一点

 var formData = new FormData(document.querySelector('form')) 

然后，您可以按照原样发布formData – 它包含表单中使用的所有名称和值。

Answer 5

使用.serializeArray（）以数组格式获取数据，然后将其转换为对象：

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

Answer 6

这里有一个非常简单和简短的解决scheme，即使不需要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; 

Answer 7

 $('#myform').serialize(); 

Answer 8

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

除此之外，你可能想看看serialize（） ;

Answer 9

这是一个正常处理checkbox，单选button和滑块（可能还有其他inputtypes，但我只testing过这些）的只能执行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; } 

工作示例：

  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; } // // Boilerplate for running the snippet/form // 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); })(); 

 <form id="main_form"> <div id="questions_wrapper"> <p>what is a?</p> <div> <input type="radio" required="" name="q_0" value="a" id="a_0"> <label for="a_0">a</label> <input type="radio" required="" name="q_0" value="b" id="a_1"> <label for="a_1">b</label> <input type="radio" required="" name="q_0" value="c" id="a_2"> <label for="a_2">c</label> <input type="radio" required="" name="q_0" value="d" id="a_3"> <label for="a_3">d</label> </div> <div class="question range"> <label for="a_13">A?</label> <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl"> <datalist id="q_3_dl"> <option value="0"></option> <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4"></option> <option value="5"></option> <option value="6"></option> <option value="7"></option> <option value="8"></option> <option value="9"></option> <option value="10"></option> </datalist> </div> <p>A and/or B?</p> <div> <input type="checkbox" name="q_4" value="A" id="a_14"> <label for="a_14">A</label> <input type="checkbox" name="q_4" value="B" id="a_15"> <label for="a_15">B</label> </div> </div> <button id="btn" type="submit">OK</button> </form> <div id="results_wrapper"></div> 

Answer 10

我使用这个：

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(); 

Answer 11

如果你正在使用jQuery，这里有一个小function，可以做你正在寻找的东西。

首先，为表单添加一个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" } 

Answer 12

 var formData = new FormData($('#form-id')); params = $('#form-id').serializeArray(); $.each(params, function(i, val) { formData.append(val.name, val.value); }); 

Answer 13

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

Answer 14

你们都不完全正确。 你不能写：

 formObj[input.name] = input.value; 

因为这样如果你有多选列表 – 它的值将被最后一个覆盖，因为它是以“param1”：“value1”，“param1”：“value2”的forms传输的。

所以，正确的做法是：

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

Answer 15

你也可以使用FormData对象; FormData对象允许您编译一组使用XMLHttpRequest发送的键/值对。 它主要用于发送表单数据，但可以独立使用表单来传输键控数据。

  var formElement = document.getElementById("myform_id"); var formData = new FormData(formElement); console.log(formData); 

Answer 16

我写了一个库来解决这个问题： JSONForms 。 它采取一种forms，通过每个input，并build立一个JSON对象，你可以很容易地阅读。

假设你有以下forms：

 <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的编码方法将返回以下对象：

 { "places": [ { "city": "New York City", "population": 8175133 }, { "city": "Los Angeles", "population": 3792621 }, { "city": "Chicago", "population": 2695598 } ] } 

这里是你的表单演示 。

Answer 17

我写了一个function，照顾多个checkbox和多个select。 在这种情况下，它返回一个数组。

 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; }, {}); } 

Answer 18

你可以使用这个函数来从窗体中获得一个对象或一个JSON。

为了使用它：

 var object = formService.getObjectFormFields("#idform"); 

Answer 19

这将把所有的表单域添加到JavaScript对象“res”中：

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

Answer 20

这个方法应该这样做。 它序列化表单数据，然后将它们转换为一个对象。 照顾checkbox组。

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

Answer 21

这里是我写的一个很好的香草JS函数来提取表单数据作为一个对象。 它还具有向对象中插入添加项以及清除表单input字段的选项。

 const extractFormData = ({ form, clear, add }) => { return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT') .reduce((formData, input) => { const value = input.value if (clear) { input.value = '' } return { ...formData, [input.name]: value } }, add) } 

这是一个使用post请求的例子：

 submitGrudge(e) { e.preventDefault() const form = e.target const add = { id: Date.now(), forgiven: false } const grudge = extractFormData({ form, add, clear: true }) // grudge = { // "name": "Example name", // "offense": "Example string", // "date": "2017-02-16", // "id": 1487877281983, // "forgiven": false // } fetch('http://localhost:3001/api/grudge', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(grudge) }) .then(response => response.json()) .then(grudges => this.setState({ grudges })) .catch(err => console.log('error: ', err)) } 

Answer 22

显示表单input元素字段和input文件来提交您的表单而不刷新页面，并抓取文件包含的所有值在这里它是

 <form id="imageUploadForm" action="" method="post" enctype="multipart/form-data"> <input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" > <input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name"> <input type="number" name='phoneno' class="form-control" id="phoneno" placeholder="Phone Number"> <textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea> <input type="file" name="file" id="file" > <input type="submit" id="sub" value="Registration"> </form> 

Answer 23

 $(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; }, {}); 

它将解决问题：不能与多选。

Answer 24

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

这是一个挑剔的答案，但让我解释为什么这是一个更好的解决scheme：

• 我们正在处理表单提交而不是button按下。 有些人喜欢进入田野。 有些人使用替代input设备，如语音input或其他辅助function设备。 处理表单提交，你正确地解决了每个人。

• 我们正在挖掘提交的实际表单的表单数据。 如果稍后更改表单select器，则不必更改所有字段的select器。 此外，您可能有几个具有相同input名称的表单。 不需要用过多的ID来区分歧义，也不需要根据提交的表单来跟踪input。 这也使您可以为多个表单使用单个事件处理程序， 如果这适合您的情况。

• FormData接口是相当新的，但很好的支持浏览器。 这是一个很好的方式来build立数据收集，以获得forms的真正价值。 没有它，你将不得不遍历所有的元素（如form.elements ），并找出什么是检查，什么不是，什么值等。完全可能的，如果你需要旧的浏览器支持，但FormData接口更简单。

• 我在这里使用ES6 …没有任何要求，所以如果你需要旧的浏览器支持，把它改回ES5兼容。