blocks|key|1111784|text|$("#form+input,+#form+select,+#form+textarea").each(function()+{
+data[theFieldName]+=+theFieldValue;
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1111785|除此之外，你可能想看看serialize()；|unstyled|offset|length|1111786|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/serialize/^0|0|B|B|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

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

<p>other than that, you might want to look at <a href="http://api.jquery.com/serialize/" rel="noreferrer">serialize()</a>;</p>


blocks|key|1111791|text|$('form').serialize()+//this+produces:+"foo=1&bar=xxx&this=hi"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1111792|demo|unstyled|offset|length|1111793|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/UpASuHo/113/edit?html,js,output^0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>$('form').serialize() //this produces: "foo=1&amp;bar=xxx&amp;this=hi"
</code></pre>

<p><a href="http://jsbin.com/UpASuHo/113/edit?html,js,output" rel="noreferrer">demo</a></p>


blocks|key|1111832|text|这会将所有表单域附加到JavaScript对象"res"：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1111833|var+res+=+{};
$("#form+input,+#form+select,+#form+textarea").each(function(i,+obj)+{
++++res[obj.name]+=+$(obj).val();
})|code-block|syntax|javascript|1111834|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This will append all form fields to the JavaScript object "res":</p>

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


blocks|key|1327060|text|使用.serializeArray()获取数组格式的数据，然后将其转换为对象：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1327061|function+getFormObj(formId)+{
++++var+formObj+=+{};
++++var+inputs+=+$('#'%2BformId).serializeArray();
++++$.each(inputs,+function+(i,+input)+{
++++++++formObj[input.name]+=+input.value;
++++});
++++return+formObj;
}|code-block|syntax|javascript|1327062|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>use .serializeArray() to get the data in array format and then convert it into an object:</p>

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


blocks|key|1327102|text|基于jQuery.serializeArray，返回键-值对。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1327103|var+data+=+$('#form').serializeArray().reduce(function(obj,+item)+{
++++obj[item.name]+=+item.value;
++++return+obj;
},+{});|code-block|syntax|javascript|1327104|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/serializeArray/^0|2|L|2|L|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>Based on <a href="http://api.jquery.com/serializeArray/"><code>jQuery.serializeArray</code></a>, returns key-value pairs.</p>

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


blocks|key|1111941|text|你们都不完全正确。您不能这样写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1111942|formObj[input.name]+=+input.value;|code-block|syntax|javascript|1111943|因为这样如果你有多选列表-它的值将被最后一个覆盖，因为它被传输为："param1“："value1"，"param1”："value2“。|1111944|所以，正确的方法是：|1111945|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);
}|1111946|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You are all not fully correct. You cannot write:</p>

<pre><code>formObj[input.name] = input.value;
</code></pre>

<p>Because this way if you have multiselect list - its values will be overwritten with the last one, since it's transmitted as: "param1" : "value1", "param1" : "value2".</p>

<p>So, correct approach is:</p>

<pre><code>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);
}
</code></pre>


blocks|key|1112007|text|这里有一个非常简单而简短的解决方案，甚至不需要Jquery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1112008|var+formElements=document.getElementById("myForm").elements;++++
var+postData={};
for+(var+i=0;+i<formElements.length;+i%2B%2B)
++++if+(formElements[i].type!="submit")//we+dont+want+to+include+the+submit-buttom
++++++++postData[formElements[i].name]=formElements[i].value;|code-block|syntax|javascript|1112009|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's a really simple and short soluton that even doesn't require Jquery.</p>

<pre><code>var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i&lt;formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;
</code></pre>


blocks|key|1327244|text|您还可以使用FormData对象；FormData对象允许您编译一组键/值对，以便使用XMLHttpRequest发送。它主要用于发送表单数据，但可以独立于表单使用，以便传输键控数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1327245|++++++++var+formElement+=+document.getElementById("myform_id");
++++++++var+formData+=+new+FormData(formElement);
++++++++console.log(formData);|code-block|syntax|javascript|1327246|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects^0|6|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can also use the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects" rel="noreferrer">FormData</a> Objects; The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data.</p>

<pre><code>        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);
</code></pre>


blocks|key|1112160|text|此方法应该可以做到这一点。它序列化表单数据，然后将其转换为对象。还负责处理复选框组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1112161|function+getFormObj(formId)+{
++var+formParams+=+{};
++$('#'+%2B+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;
}|code-block|syntax|javascript|1112162|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This method should do it. It serializes the form data and then converts them to an object. Takes care of groups of checkboxes as well.</p>

<pre><code>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;
}
</code></pre>


blocks|key|1327385|text|我写了一个库来解决这个问题：JSONForms。它接受一个表单，遍历每个输入并构建一个您可以轻松阅读的JSON对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1327386|假设您有以下形式：|1327387|<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>|code-block|syntax|javascript|1327388|将表单传递给JSONForms的encode方法将返回以下对象：|1327389|{
++"places":+[
++++{
++++++"city":+"New+York+City",
++++++"population":+8175133
++++},
++++{
++++++"city":+"Los+Angeles",
++++++"population":+3792621
++++},
++++{
++++++"city":+"Chicago",
++++++"population":+2695598
++++}
++]
}|1327390|这是您的表单的demo。|1327391|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/cezary/JSONForms|1|http://jsbin.com/xepuvasaki/2/edit^0|E|9|0|0|0|0|0|0|7|4|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

<p>I wrote a library to solve this very problem: <a href="https://github.com/cezary/JSONForms" rel="nofollow">JSONForms</a>. It takes a form, goes through each input and builds a JSON object you can easily read.</p>

<p>Say you have the following form:</p>

<pre><code>&lt;form enctype='application/json'&gt;
  &lt;input name='places[0][city]' value='New York City'&gt;
  &lt;input type='number' name='places[0][population]' value='8175133'&gt;
  &lt;input name='places[1][city]' value='Los Angeles'&gt;
  &lt;input type='number' name='places[1][population]' value='3792621'&gt;
  &lt;input name='places[2][city]' value='Chicago'&gt;
  &lt;input type='number' name='places[2][population]' value='2695598'&gt;
&lt;/form&gt;
</code></pre>

<p>Passing the form to JSONForms' encode method returns you the following object:</p>

<pre><code>{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}
</code></pre>

<p>Here's <a href="http://jsbin.com/xepuvasaki/2/edit" rel="nofollow">demo</a> with your form.</p>


blocks|key|1112324|text|如果你使用的是jQuery，这里有一个小函数可以做你想要的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1112325|首先，添加一个ID到你的表单(除非它是页面上唯一的表单，然后你可以使用'+form‘作为dom查询)|1112326|<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%2B%2B){
++++++++var+record+=+s_data[i];
++++++++out[record.name]+=+record.value;
++++}
++++return+out;
}

console.log(getFormData('#some-form'));
</script>|code-block|syntax|javascript|1112327|输出将如下所示：|1112328|{
+"foo":+"1",
+"bar":+"xxx",
+"this":+"hi"
}|1112329|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>If you are using jQuery, here is a little function that will do what you are looking for.</p>

<p>First, add an ID to your form (unless it is the only form on the page, then you can just use 'form' as the dom query)</p>

<pre><code>&lt;form id="some-form"&gt;
 &lt;input type="radio" name="foo" value="1" checked="checked" /&gt;
 &lt;input type="radio" name="foo" value="0" /&gt;
 &lt;input name="bar" value="xxx" /&gt;
 &lt;select name="this"&gt;
  &lt;option value="hi" selected="selected"&gt;Hi&lt;/option&gt;
  &lt;option value="ho"&gt;Ho&lt;/option&gt;
&lt;/form&gt;

&lt;script&gt;
//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&lt;s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
&lt;/script&gt;
</code></pre>

<p>The output would look like:</p>

<pre><code>{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}
</code></pre>


blocks|key|1112333|text|var+formData+=+new+FormData($('#form-id'));
params+++=+$('#form-id').serializeArray();

$.each(params,+function(i,+val)+{
++++formData.append(val.name,+val.value);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1112334|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});
</code></pre>


blocks|key|1112426|text|下面是一个可以正常工作的JavaScript实现，它可以正确处理复选框、单选按钮和滑块(可能还有其他输入类型，但我只测试过这些类型)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1112427|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+%2B=+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;
}|code-block|syntax|javascript|1112428|工作示例：|1112429|​|1112430|++++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+%2B=+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);
++++})();|1112431|<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>|1112432|1112433|编辑：|1112434|如果您正在寻找一个更完整的实现，那么可以看看this+section+of+the+project+I+made+this+for。我最终会用我想出的完整解决方案更新这个问题，但这可能会对某些人有所帮助。|offset|length|1112435|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vta/next_network_survey/blob/master/VTA.Survey.js#L689^0|0|0|0|0|0|0|0|0|M|17|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|O|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1B|8|@]|9|@$T|1C|U|1D|1|1E]]|A|$]]|$1|V|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<p>Here is a working JavaScript only implementation which correctly handles checkboxes, radio buttons, and sliders (probably other input types as well, but I've only tested these).</p>

<pre><code>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 &lt; 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;
}
</code></pre>

<h2>Working example:</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    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 &lt; 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);
    })();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="main_form"&gt;
  &lt;div id="questions_wrapper"&gt;
    &lt;p&gt;what is a?&lt;/p&gt;
    &lt;div&gt;
      &lt;input type="radio" required="" name="q_0" value="a" id="a_0"&gt;
      &lt;label for="a_0"&gt;a&lt;/label&gt;
      &lt;input type="radio" required="" name="q_0" value="b" id="a_1"&gt;
      &lt;label for="a_1"&gt;b&lt;/label&gt;
      &lt;input type="radio" required="" name="q_0" value="c" id="a_2"&gt;
      &lt;label for="a_2"&gt;c&lt;/label&gt;
      &lt;input type="radio" required="" name="q_0" value="d" id="a_3"&gt;
      &lt;label for="a_3"&gt;d&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="question range"&gt;
      &lt;label for="a_13"&gt;A?&lt;/label&gt;
      &lt;input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl"&gt;
      &lt;datalist id="q_3_dl"&gt;
        &lt;option value="0"&gt;&lt;/option&gt;
        &lt;option value="1"&gt;&lt;/option&gt;
        &lt;option value="2"&gt;&lt;/option&gt;
        &lt;option value="3"&gt;&lt;/option&gt;
        &lt;option value="4"&gt;&lt;/option&gt;
        &lt;option value="5"&gt;&lt;/option&gt;
        &lt;option value="6"&gt;&lt;/option&gt;
        &lt;option value="7"&gt;&lt;/option&gt;
        &lt;option value="8"&gt;&lt;/option&gt;
        &lt;option value="9"&gt;&lt;/option&gt;
        &lt;option value="10"&gt;&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
    &lt;p&gt;A and/or B?&lt;/p&gt;
    &lt;div&gt;
      &lt;input type="checkbox" name="q_4" value="A" id="a_14"&gt;
      &lt;label for="a_14"&gt;A&lt;/label&gt;
      &lt;input type="checkbox" name="q_4" value="B" id="a_15"&gt;
      &lt;label for="a_15"&gt;B&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="btn" type="submit"&gt;OK&lt;/button&gt;
&lt;/form&gt;
&lt;div id="results_wrapper"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<h2>edit:</h2>

<p>If you're looking for a more complete implementation, then take a look at <a href="https://github.com/vta/next_network_survey/blob/master/VTA.Survey.js#L689" rel="noreferrer">this section of the project I made this for</a>. I'll update this question eventually with the complete solution I came up with, but maybe this will be helpful to someone.</p>


blocks|key|1112546|text|您可以使用this+function来拥有一个对象或一个来自表单的JSON。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1112547|要使用它：|1112548|​|1112549|var+object+=+formService.getObjectFormFields("#idform");|code-block|syntax|javascript|1112550|1112551|1112552|+function++getObjectFormFields(formSelector)
++++++++{
++++++++++++///+<summary>Função+que+retorna+objeto+com+base+nas+propriedades+name+dos+elementos+do+formulário.</summary>
++++++++++++///+<param+name="formSelector"+type="String">Seletor+do+formulário</param>

++++++++++++var+form+=+$(formSelector);

++++++++++++var+result+=+{};
++++++++++++var+arrayAuxiliar+=+[];
++++++++++++form.find(":input:text").each(function+(index,+element)
++++++++++++{
++++++++++++++++var+name+=+$(element).attr('name');

++++++++++++++++var+value+=+$(element).val();
++++++++++++++++result[name]+=+value;
++++++++++++});

++++++++++++form.find(":input[type=hidden]").each(function+(index,+element)
++++++++++++{
++++++++++++++++var+name+=+$(element).attr('name');
++++++++++++++++var+value+=+$(element).val();
++++++++++++++++result[name]+=+value;
++++++++++++});


++++++++++++form.find(":input:checked").each(function+(index,+element)
++++++++++++{
++++++++++++++++var+name;
++++++++++++++++var+value;
++++++++++++++++if+($(this).attr("type")+==+"radio")
++++++++++++++++{
++++++++++++++++++++name+=+$(element).attr('name');
++++++++++++++++++++value+=+$(element).val();
++++++++++++++++++++result[name]+=+value;
++++++++++++++++}
++++++++++++++++else+if+($(this).attr("type")+==+"checkbox")
++++++++++++++++{
++++++++++++++++++++name+=+$(element).attr('name');
++++++++++++++++++++value+=+$(element).val();
++++++++++++++++++++if+(result[name])
++++++++++++++++++++{
++++++++++++++++++++++++if+(Array.isArray(result[name]))
++++++++++++++++++++++++{
++++++++++++++++++++++++++++result[name].push(value);
++++++++++++++++++++++++}+else
++++++++++++++++++++++++{
++++++++++++++++++++++++++++var+aux+=+result[name];
++++++++++++++++++++++++++++result[name]+=+[];
++++++++++++++++++++++++++++result[name].push(aux);
++++++++++++++++++++++++++++result[name].push(value);
++++++++++++++++++++++++}

++++++++++++++++++++}+else
++++++++++++++++++++{
++++++++++++++++++++++++result[name]+=+[];
++++++++++++++++++++++++result[name].push(value);
++++++++++++++++++++}
++++++++++++++++}

++++++++++++});

++++++++++++form.find("select+option:selected").each(function+(index,+element)
++++++++++++{
++++++++++++++++var+name+=+$(element).parent().attr('name');
++++++++++++++++var+value+=+$(element).val();
++++++++++++++++result[name]+=+value;

++++++++++++});

++++++++++++arrayAuxiliar+=+[];
++++++++++++form.find("checkbox:checked").each(function+(index,+element)
++++++++++++{
++++++++++++++++var+name+=+$(element).attr('name');
++++++++++++++++var+value+=+$(element).val();
++++++++++++++++result[name]+=+arrayAuxiliar.push(value);
++++++++++++});

++++++++++++form.find("textarea").each(function+(index,+element)
++++++++++++{
++++++++++++++++var+name+=+$(element).attr('name');
++++++++++++++++var+value+=+$(element).val();
++++++++++++++++result[name]+=+value;
++++++++++++});

++++++++++++return+result;
++++++++}|1112553|1112554|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/marcoslcosta/29d6df788f12a0e806ecadbf5f7c00ce^0|5|D|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|N|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|C|$K|L]]|$1|Q|3|G|5|6|7|19|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

<p>you can use <a href="https://gist.github.com/marcoslcosta/29d6df788f12a0e806ecadbf5f7c00ce" rel="nofollow noreferrer">this function</a> for have an object or a JSON from form.</p>

<p>for use it:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var object = formService.getObjectFormFields("#idform");</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> function  getObjectFormFields(formSelector)
        {
            /// &lt;summary&gt;Função que retorna objeto com base nas propriedades name dos elementos do formulário.&lt;/summary&gt;
            /// &lt;param name="formSelector" type="String"&gt;Seletor do formulário&lt;/param&gt;

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }</code></pre>
</div>
</div>
</p>


blocks|key|1112612|text|我写了一个函数来处理多个复选框和多个选择。在这些情况下，它返回一个数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1112613|function+getFormData(formId)+{
++++return+$('#'+%2B+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;
++++},+{});
}|code-block|syntax|javascript|1112614|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I wrote a function that takes care of multiple checkboxes and multiple selects. In those cases it returns an array.</p>

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


blocks|key|1327734|text|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;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1327735|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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;
}
</code></pre>


blocks|key|1327793|text|$(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;
},+{});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1327794|它将修复问题:不能与多选一起工作。|unstyled|1327795|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<p>It will fix issue:couldn't work with multiselects.</p>


blocks|key|1112743|text|显示表单输入元素字段和输入文件，以在不刷新页面的情况下提交表单，并获取包含文件的所有值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1112744|​|1112745|<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>|code-block|syntax|javascript|1112746|在提交按钮页面将发送ajax请求到您的php文件。|1112747|$('#imageUploadForm').on('submit',(function(e)+
{
+++++fname+=+$('#fname').val();
+++++lname+=++$('#lname').val();
+++++address+=++$('#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:+'<?php+echo+base_url().'edit_profile/edit_profile2';?>',

++++++++++++++++data:formData,
++++++++++++++++cache:false,
++++++++++++++++contentType:+false,
++++++++++++++++processData:+false,
++++++++++++++++success:function(data)
++++++++++++++++{
+++++++++++++++++++++alert('Data+with+file+are+submitted+!');

++++++++++++++++}

+++++});

}))|1112748|1112749|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|S|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>showing form input element fields and input file to submit your form without page refresh and grab all values with file include in it here it is </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data"&gt;
&lt;input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" &gt;
&lt;input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name"&gt;
&lt;input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number"&gt;
&lt;textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"&gt;&lt;/textarea&gt;
&lt;input type="file" name="file" id="file" &gt;
&lt;input type="submit" id="sub" value="Registration"&gt;					   
&lt;/form&gt;</code></pre>
</div>
</div>

on Submit button page will send ajax request to your php file. 
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#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: '&lt;?php echo base_url().'edit_profile/edit_profile2';?&gt;',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))</code></pre>
</div>
</div>
</p>


blocks|key|1327982|text|下面是我编写的一个很好的普通JS函数，用于将表单数据提取为对象。它还具有向对象中插入附加内容和清除表单输入字段的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1327983|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)
}|code-block|syntax|javascript|1327984|下面是它与post请求一起使用的一个示例：|1327985|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))
}|1327986|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Here is a nice vanilla JS function I wrote to extract form data as an object. It also has options for inserting additions into the object, and for clearing the form input fields.</p>

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

<p>Here is an example of its use with a post request:</p>

<pre><code>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 =&gt; response.json())
    .then(grudges =&gt; this.setState({ grudges }))
    .catch(err =&gt; console.log('error: ', err))
}
</code></pre>


blocks|key|1328043|text|我已经包含了答案，以便也返回所需的对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328044|function+getFormData(form)+{
var+rawJson+=+form.serializeArray();
var+model+=+{};

$.map(rawJson,+function+(n,+i)+{
++++model[n['name']]+=+n['value'];
});

return+model;
}|code-block|syntax|javascript|1328045|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have included the answer to also give back the object required.</p>

<pre><code>function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}
</code></pre>


blocks|key|1328096|text|根据neuront的响应，我创建了一个简单的JQuery方法，它以键-值对的形式获取表单数据，但它适用于多选和使用name='example[]‘的数组输入。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328097|它的用法如下：|1328098|var+form_data+=+$("#form").getFormObject();|code-block|syntax|javascript|1328099|你可以在下面找到它的定义和工作原理的一个例子。|1328100|​|1328101|//+Function+start
$.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;
++++},+{});
++++return+object;
}
//+Function+ends

//+This+is+how+it's+used
$("#getObject").click(+function()+{
++var+form_data+=+$("#form").getFormObject();
++console.log(form_data);
});|1328102|/*+Only+to+make+view+better+;)+*/
#getObject+{
++padding:+10px;
++cursor:pointer;
++background:#0098EE;
++color:white;
++display:inline-block;
}|1328103|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form+id="form">
++<input+type="text"+name="text"+value="Hola+amigo"+/>+
++
++<input+type="text"+name="text_array[]"+value="Array+1"+/>+
++<input+type="text"+name="text_array[]"+value="Array+2"+/>+
++<input+type="text"+name="text_array[]"+value="Array+3"+/>+
++
++<select+name="multiselect"+multiple>
++++<option+name="option1"+selected>+option+1+</option>
++++<option+name="option2"+selected>+option+2+</option>
++</select>
++
++<input+type="checkbox"+name="checkbox"+value="checkbox1"+checked/>
++<input+type="checkbox"+name="checkbox"+value="checkbox2"+checked/>
++
++<input+type="radio"+name="radio"+value="radio1"+checked/>
++<input+type="radio"+name="radio"+value="radio2"/>

</form>

<div+id="getObject">+Get+object+(check+the+console!)+</div>|1328104|1328105|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|S|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p>Based on neuront's response I created a simple JQuery method that gets the form data in key-value pairs but it works for multi-selects and for array inputs with name='example[]'.</p>

<p>This is how it is used:</p>

<pre><code>var form_data = $("#form").getFormObject();
</code></pre>

<p>You can find an example below of its definition and how it works.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Function start
$.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;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;form id="form"&gt;
  &lt;input type="text" name="text" value="Hola amigo" /&gt; 
  
  &lt;input type="text" name="text_array[]" value="Array 1" /&gt; 
  &lt;input type="text" name="text_array[]" value="Array 2" /&gt; 
  &lt;input type="text" name="text_array[]" value="Array 3" /&gt; 
  
  &lt;select name="multiselect" multiple&gt;
    &lt;option name="option1" selected&gt; option 1 &lt;/option&gt;
    &lt;option name="option2" selected&gt; option 2 &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type="checkbox" name="checkbox" value="checkbox1" checked/&gt;
  &lt;input type="checkbox" name="checkbox" value="checkbox2" checked/&gt;
  
  &lt;input type="radio" name="radio" value="radio1" checked/&gt;
  &lt;input type="radio" name="radio" value="radio2"/&gt;

&lt;/form&gt;

&lt;div id="getObject"&gt; Get object (check the console!) &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1113012|text|现在是2019年，有一个更好的方法可以做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1113013|const+form+=+document.querySelector('form');
const+data+=+new+URLSearchParams(new+FormData(form).entries());|code-block|syntax|javascript|1113014|或者如果你想要一个普通的对象|1113015|const+form+=+document.querySelector('form');
const+data+=+Object.fromEntries(new+FormData(form).entries());|1113016|但请注意，这不适用于重复的键，就像您从具有相同名称的多选和复制复选框中得到的那样。|1113017|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>It is 2019 and there's a better way to do this:</p>

<pre class="lang-js prettyprint-override"><code>const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());
</code></pre>

<p>or if you want a plain Object instead</p>

<pre class="lang-js prettyprint-override"><code>const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());
</code></pre>

<p>although note that this won't work with duplicate keys like you get from multi-select and duplicate checkboxes with the same name.</p>


blocks|key|1113043|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1113044|$(+"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+%7C%7C+'');
++++++++}
++++++++else+
++++++++{
++++++++++++o[this.name]+=+this.value+%7C%7C+'';
++++++++}
++++});

++++return+o;
};|code-block|syntax|javascript|1113045|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<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>
++++</select>

++++<input+type="submit"+value="Submit"+/>

</form>|1113046|1113047|Codepen|offset|length|1113048|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/antelove/pen/ZEEJjyX^0|0|0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$L|10|M|11|1|12]]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$( "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 || '';
        }
    });

    return o;
};</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;form&gt;

    &lt;input type="radio" name="foo" value="1" checked="checked" /&gt;
    &lt;input type="radio" name="foo" value="0" /&gt;
    &lt;input name="bar" value="xxx" /&gt;

    &lt;select name="this"&gt;
        &lt;option value="hi" selected="selected"&gt;Hi&lt;/option&gt;
        &lt;option value="ho"&gt;Ho&lt;/option&gt;
    &lt;/select&gt;

    &lt;input type="submit" value="Submit" /&gt;

&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://codepen.io/antelove/pen/ZEEJjyX" rel="nofollow noreferrer">Codepen</a></p>


blocks|key|1113103|text|最简单的方法，2021年。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1113104|document.querySelector('form').addEventListener('submit',+(e)+=>+{
++const+data+=+Object.fromEntries(new+FormData(e.target).entries());
++console.log(data)
});|code-block|syntax|javascript|1113105|输出|1113106|{+name:+'Stackoverflow'+}|1113107|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Simplest way, 2021.</p>
<pre><code>document.querySelector('form').addEventListener('submit', (e) =&gt; {
  const data = Object.fromEntries(new FormData(e.target).entries());
  console.log(data)
});
</code></pre>
<p>Output</p>
<pre><code>{ name: 'Stackoverflow' }
</code></pre>


blocks|key|1328288|text|我有点吃惊，因为没有人提到下面的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1328289|通过document.forms.namedItem函数获取表单数据|1328290|var+form+=+document.forms.namedItem("fileinfo");

form.addEventListener('submit',+function(ev)+{
+++var+oData+=+new+FormData(form);
}|code-block|syntax|javascript|1328291|HT|1328292|<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>|1328293|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I'm kind of supprised because no one mentioned below solution.</p>
<p>Get form data via document.forms.namedItem function</p>
<pre><code>var form = document.forms.namedItem(&quot;fileinfo&quot;);

form.addEventListener('submit', function(ev) {
   var oData = new FormData(form);
}
</code></pre>
<p>The HT</p>
<pre><code>&lt;form name=&quot;fileinfo&quot;&gt;
  &lt;label&gt;Your email address:&lt;/label&gt;
  &lt;input type=&quot;email&quot; autocomplete=&quot;on&quot; autofocus name=&quot;userid&quot; placeholder=&quot;email&quot; required size=&quot;32&quot; maxlength=&quot;64&quot; /&gt;&lt;br /&gt;
  &lt;label&gt;Custom file label:&lt;/label&gt;
  &lt;input type=&quot;text&quot; name=&quot;filelabel&quot; size=&quot;12&quot; maxlength=&quot;32&quot; /&gt;&lt;br /&gt;
  &lt;label&gt;File to stash:&lt;/label&gt;
  &lt;input type=&quot;file&quot; name=&quot;file&quot; required /&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Stash the file!&quot; /&gt;
&lt;/form&gt;
&lt;div&gt;&lt;/div&gt;
</code></pre>


<p>Is there a simple, one-line way to get the data of a form as it would be if it was to be submitted in the classic HTML-only way?</p>

<p>For example:</p>

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

<p>Output:</p>

<pre><code>{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}
</code></pre>

<p>Something like this is too simple, since it does not (correctly) include textareas, selects, radio buttons and checkboxes:</p>

<pre><code>$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});
</code></pre>


How can I get form data with JavaScript/jQuery?

jQuery

JSON

有没有一种简单的、单行的方法来获取表单的数据，就像以经典的纯HTML方式提交表单一样？例如：<form>    <input type="radio" name="foo" value="1" checked="checked" />    <input type="radio" name="foo" value="0...

问如何使用JavaScript/jQuery获取表单数据？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript/jQuery获取表单数据？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript/jQuery获取表单数据？
EN