Javascript 如何从 HTML 表单中获取键/值数据集
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30964568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a key/value data set from a HTML form
提问by Simone
I'm simply looking for a way to get all the valuesfrom a <form>.
我只是在寻找一种方式来获得所有的值从<form>。
I searched the Web for a while, stumbling across FormData, which seems quite what I'm looking for.
我在网上搜索了一段时间，偶然发现了FormData，这似乎正是我正在寻找的。
However its API is not availableon any browser, so I need an alternative.
但是它的 API在任何浏览器上都不可用，所以我需要一个替代方案。
What I need in my specific case is an object of key/value pairs. For example:
在我的特定情况下，我需要的是键/值对的对象。例如：
<form>
<input type="text" name="firstname" value="John" />
<input type="text" name="surname" value="doe" />
<input type="email" name="email" value="" />
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
</form>
The object should be:
对象应该是：
{
firstname: "John",
surname: "doe",
email: "",
gender: ""
}
Edit:The above is just an example, it should work not only with <input>but also with the other tags (e.g. <select>, <textarea>and so on... even <input type="file">should be supported).
编辑：以上只是一个例子，它不仅应该<input>与其他标签一起工作，还应该与其他标签一起工作（例如<select>，<textarea>等等......甚至<input type="file">应该支持）。
采纳答案by zzzzBov
Without a strong definition of what should happen with edge cases, and what level of browser support is required, it's difficult to give a single perfect answer to the question.
如果没有明确定义边缘情况会发生什么，以及需要什么级别的浏览器支持，就很难对这个问题给出一个完美的答案。
There are a lot of form behaviors that are easy to miss, which is why I recommend using a well-maintained function from a library, such as jQuery's serializeArray():
有很多表单行为很容易被忽略，这就是为什么我建议使用库中维护良好的函数，例如jQuery 的serializeArray()：
$('form').serializeArray();
I understand that there's a big push recently to move away from needlessly including jQuery, so for those who are interested in a vanilla JS solution serializeArrayjust won't do.
我知道最近有一个很大的推动力要摆脱不必要的包含 jQuery，所以对于那些对 vanilla JS 解决方案感兴趣的人是serializeArray不会这样做的。
The next difficulty comes from determining what level of browser support is required. HTMLFormElement.elementssignificantly simplifies a serialization implementation, and selecting the form-associated elements without it is quite a pain.
下一个困难来自于确定需要什么级别的浏览器支持。HTMLFormElement.elements显着简化了序列化实现，并且在没有它的情况下选择与表单相关的元素非常痛苦。
Consider:
考虑：
<form id="example">...</form>
<input type="text" form="example" name="lorem" value="ipsum"/>
A conforming implementation needs to include the inputelement. I will assume that I canuse it, and leave polyfilling it as an exercise to the reader.
符合要求的实现需要包含该input元素。我会假设我可以使用它，并将 polyfill 作为练习留给读者。
After that it'd unclear how <input type="file"/>should be supported. I'm not keen on needlessly serializing file elements into a string, so I've made the assumption that the serialization will be of the input's name and value, even though the value is practically useless.
之后就不清楚<input type="file"/>应该如何支持。我并不热衷于将文件元素不必要地序列化为字符串，因此我假设序列化将是输入的名称和值，即使该值实际上是无用的。
Lastly, an input structure of:
最后，输入结构：
{
'input name': 'value',
'textarea name': 'value'
}
Is excessively naive as it doesn't account for <select multiple>elements, or cases where two inputs have the same name. I've made the assumption that the input would be better as:
过于天真，因为它没有考虑<select multiple>元素，或者两个输入具有相同名称的情况。我假设输入会更好，因为：
[
{
name: 'input name',
value: 'value'
},
{
name: 'textarea name',
value: 'value'
}
]
...and again leave transforming this into a different structure as an exercise for the reader.
...并再次将其转换为不同的结构作为读者的练习。
Give me teh codez already!
给我代码吧！
var serialize = (function (slice) {
return function (form) {
//no form, no serialization
if (form == null)
return null;
//get the form elements and convert to an array
return slice.call(form.elements)
.filter(function (element) {
//remove disabled elements
return !element.disabled;
}).filter(function (element) {
//remove unchecked checkboxes and radio buttons
return !/^input$/i.test(element.tagName) || !/^(?:checkbox|radio)$/i.test(element.type) || element.checked;
}).filter(function (element) {
//remove <select multiple> elements with no values selected
return !/^select$/i.test(element.tagName) || element.selectedOptions.length > 0;
}).map(function (element) {
switch (element.tagName.toLowerCase()) {
case 'checkbox':
case 'radio':
return {
name: element.name,
value: element.value === null ? 'on' : element.value
};
case 'select':
if (element.multiple) {
return {
name: element.name,
value: slice.call(element.selectedOptions)
.map(function (option) {
return option.value;
})
};
}
return {
name: element.name,
value: element.value
};
default:
return {
name: element.name,
value: element.value || ''
};
}
});
}
}(Array.prototype.slice));
回答by shan
You could go for a manual way (Below code is not tested though);
您可以采用手动方式（但未测试以下代码）；
var form = document.getElementsByTagName("form");
var inputs = form[0].getElementsByTagName("input");
var formData = {};
for(var i=0; i< inputs.length; i++){
formData[inputs[i].name] = inputs[i].value;
}
var formdata = JSON.stringify(formData);
if you use a library this would be easier. Eg:- in jQuery:
如果您使用图书馆，这会更容易。例如：- 在 jQuery 中：
var formObjects = $("form :input");
formObjects.each(
function(){
formData[$(this).attr("name")] = $(this).val(); /*setting up name/value pairs */
}
);
in this code formObjectscontains all input, select and textareaand other form element tags. so we don't need to manually search for each like in plain JS. Except for radio buttons (As @enhzflep implied this doesn't work correct for input[type=radio] )
在这段代码中，formObjects包含了所有的 input、select 和 textarea等表单元素标签。所以我们不需要在普通的 JS 中手动搜索每个喜欢的东西。除了单选按钮（正如@enhzflep 暗示这对 input[type=radio] 不起作用）
But if you use jQuery you can directly use jQuery's serialize()function to grab the whole form by name-value pairs.
但是如果你使用 jQuery，你可以直接使用 jQuery 的serialize()函数通过名称-值对来获取整个表单。
var url_friendly_name_value_string = $("form").serialize();
回答by Tarang
You would need to manually generate the json/javascript object before sending it to the server. Should be a method called onSubmit which would pick each of the form's input value and create an object which can then be sent to the server page.
在将它发送到服务器之前，您需要手动生成 json/javascript 对象。应该是一个名为 onSubmit 的方法，它会选择表单的每个输入值并创建一个对象，然后可以将其发送到服务器页面。
You can refer this answer which is similar to what you are looking for: Convert form data to JavaScript object with jQuery
您可以参考这个类似于您正在寻找的答案： Convert form data to JavaScript object with jQuery
回答by natnai
Just use jQuery.
只需使用jQuery。
HTML:
HTML：
<form id="my-form">
<input type="text" name="my-field" />
</form>
JS:
JS：
var data = $('form#my-form').serializeArray(); // [{'my-field': 'value'}]
$.ajax({
data: data
//other config goes here
});
回答by Rajkishore
Pardon my haste for not formatting the example, But its good to understand. Click 'Get All Values' to see the key/value pair in alert.
请原谅我没有格式化示例的匆忙，但它很好理解。单击“获取所有值”以查看警报中的键/值对。
$(function(){
$(".getFormVal").on("click",function(e){
e.preventDefault();
var formObj={};
var formEle = $(".form").find("input:not([type=submit],[type=button]),select,textarea");
$(formEle).each(function(){
if($(this).prop("tagName").toLowerCase() == "input"){
if( ($(this).attr("type").toLowerCase() == "text") ||
($(this).attr("type").toLowerCase() == "radio" && $(this).is(":checked")) ||
($(this).attr("type").toLowerCase() == "file") ){
formObj[$(this).attr("name")] = $(this).val();
}else if( $(this).attr("type").toLowerCase() == "checkbox" && $(this).is(":checked") ){
if(formObj[$(this).attr("name")] === undefined){
formObj[$(this).attr("name")] = [];
}
formObj[$(this).attr("name")].push($(this).val());
}
}else if( $(this).prop("tagName").toLowerCase() == "textarea" ){
formObj[$(this).attr("name")] = $(this).val();
}else if( $(this).prop("tagName").toLowerCase() == "select" ){
if($(this).attr("multiple")){
if(formObj[$(this).attr("name")] === undefined){
var selectEleName = $(this).attr("name");
formObj[selectEleName] = [];
}
$('option:selected',this).each(function(i, selected){
formObj[selectEleName].push($(this).attr("value"));
});
}else{
formObj[$(this).attr("name")] = $(this).val();
}
}
});
alert(JSON.stringify(formObj));
});
});
回答by Hett
I'm suggesting you to use css selectorsfor selecting the inputs from your form: querySelectorand querySelectorAll. Here's the working codeand here's the js code.
我建议您使用css 选择器从表单中选择输入：querySelector和querySelectorAll。这是工作代码，这是 js 代码。
function get_form_data()
{
var el = document.querySelector('form');
var matches = el.querySelectorAll('input[name]');
var data = {};
for(var i=0; i< matches.length; i++){
data[matches[i].name] = matches[i].value;
}
var json_data = JSON.stringify(data);
}
Sure you can modify the selectors for your needs. I hope this will be useful and good luck to you.
当然，您可以根据需要修改选择器。我希望这对你有用并祝你好运。
回答by vinayakj
Here is the pure javascript solution which gives the required output for all kind of inputs in a form including files.
这是纯javascript解决方案，它以包括文件的形式为所有类型的输入提供所需的输出。
Sample output
样本输出
{
"firstname":"John",
"surname":"doe",
"email":"[email protected]",
"gender":"female",
"subscribe":true,
"selection":"M",
"description":"sdfs sdfs sdf",
"upload":"data:text/plain;base64,/v8JLAk+CTMAIAkVCUcJNgk1ACAJIAk+CRUJMAlHAC4ADQAKAA0ACgk5CT8JAgkoCU0JJglBCSQJTQk1CT4JGgk+ACAJHwkjCSQJTQkVCT4JMAAuACAJNQlNCS8JAgkXCRoJPwkkCU0JMAkVCT4JMAAgCSQJRwAgCTkJPwkoCU0JJglBCTkJTQkwCUEJJgkvCTgJLglNCTAJPgkfAA0ACgkkCUsJAgkhACAJNQk+CRwJNQlBCSgAIAkoCU0JLwk+CS8AIAkuCT8JMwkkACAJKAk4CUcJMgAgCSQJMAANAAoJJAlLCQIJIQk+CSQAIAk1CT4JHAk1CUEJKAAgCSgJTQkvCT4JLwAgCS4JPwkzCTUJPgAsAA0ACgkqCSMAIAkoCU0JLwk+CS8AIAk5CT4AIAkdCT4JMgk+CRoAIAkqCT4JOQk/CRwJRwAuAA0ACgkPCRUAIAkuCT4JIwlBCTgAIAkkCUEJLgkaCU0JLwk+ACAJLgk+CR0JTQkvCT4AIAk4CT4JMAkWCT4JGgAsACAJCQkCCRoJQAkoCUcAIAkGCSMJPwAgCTUJHAkoCT4JKAlHACAJLgk+CSQJTQkwACAJFQkuCUAJGgAuACAJKgk+CTkJJAAgCTkJSwkkCT4AIAkGCSoJMglNCS8JPgAgCQYJHAlBCSwJPgkcCUEJGglAACAJKgkwCT8JOAlNCSUJPwkkCUAALgAgCTkJSwkjCT4JMAk+ACAJLgkwCT4JIAlAACAJLgk+CSMJOAk+CTUJMAkaCT4AIAkFCSgJTQkvCT4JLwAsACAJJAlLCTkJPwAgCS4JOQk+CTAJPgk3CU0JHwlNCTAJPgkkCRoALgAgCS4JQgkXACAJFwk/CTMJQQkoACAJFwkqCU0JKgAgCSwJOAkyCUcJMglHACAJOAkwCRUJPgkwAC4AIAkkCUAAIAkaCT4JMAlAACAJLAk+CRwJQQkoCUcAIAk5CUsJIwk+CTAJQAAgCRcJMwkaCUcJKglAAC4AIAkGCSQJPgAgCRUJPgkvACAJFQkwCT4JNQlHAC4ALgkGCSoJIwAgCTkJPwAgCRcJKglNCSoAIAksCTgJPgk1CUcAIAkVCT8AIAkGCTUJPgkcACAJCQkaCTIJPgk1CT4ALgAgCSQJSwAgCS4JPgkjCUEJOAAgCTgJPgkuCT4JKAlNCS8AIAkoCTUJTQk5CSQJPgAgCSQJTQkvCT4JKAlHACAJNgk+CQIJJAAgCSwJOAkjCUcAIAk5CT4AIAk1CT8JGgk+CTAAIAkVCScJQAkaACAJFQlHCTIJPgAgCSgJPgk5CT8AIAkGCSMJPwAgCSsJPAlBCQIJFQkyCUAAIAkkCUEJJAk+CTAJPwAgCS4JMAk+CSAJPwAgCQUJOAlNCS4JPwkkCUcJOAk+CSAJQAAgCRUJPgkwCSMAIAkkCUsAIAk5CUsJJAk+ACAJLAk+CTMAIAkgCT4JFQkwCUcALgANAAoJLAk+CTMJKAlHACAJBgkqCTIJPgAgCSQJSwkrCTwJFgk+CSgJPgAgCQkJGAkhCTIJPgAuACAJLAkYCSQJPgAgCSwJGAkkCT4AIAkuCT4JNQkzCUcAIAkcCS4JQQAgCTIJPgkXCTIJRwAsACAJJAk+CRUJJgAgCTUJPgkiCUEAIAkyCT4JFwkyCUAALgAgCSoJIwAgCSgJFQlNCRUJPwAgCRUJMAlBACAJFQk+CS8AIAk5CT4AIAkqCU0JMAk2CU0JKAAgCTkJSwkkCT4JGgAuACAJBwklCUcJGgAgCTUJIQk/CTIJPgkCCSgJQAAgCSoJTQkwCSwJSwknCSgJFQk+CTAAIAkgCT4JFQkwCUcJAgkoCUAAIAkqCU0JMAk2CU0JKAAgCTUJPwkaCT4JMAkyCT4ALgAuAA0ACiAcCSwJPgkzACAJMglLCRUJRwAgCSQJMAAgCRwJLgkyCUAAIAkqCSMAIAkvCT4JMgk+ACAJOAkCCRgJHwkoCUcJGglHACAJMAlBCSoAIAkmCUcJIwk+CTAAIAkVCT8AIAkoCT4JOQlAAD8AIAkVCT4JOQk/ACAJKAk+CTUAIAk4CUEJGgkkCS8AIAkVCT4AIAk4CQIJGAkfCSgJRwAgCTgJPgkgCUAAPyAdAA0ACgksCT4JMwAgCQkJJAlNCSQJMAkyCT4ALgAuIB0JNQk/CRoJPgkwACAJJAkwACAJGgk+CTIJQQAgCQYJOQlHAC4ALgkqCSMAIAk4CQIJGAkfCSgJRwkyCT4AIAkoCT4JNSAmIB0ADQAKIBwJLgk/ACAJOAk+CQIJFwkkCUsAIAkoCT4JNSAmAC4ALgk2CT8JNQk4CUcJKAk+IB0ADQAKCWcJbwAgCRwJQQkoACAJZwlvCWwJbAAuAC4JNgk/CTUJPgkcCUAAIAkqCT4JMAlNCRUALgAuCTkJHAk+CTAJSwkCCSgJPwAgCRwJLgkyCUcJMgk+ACAJLgkwCT4JIAlAACAJLgk+CSMJQQk4AC4AIAkGCSMJPwAgCTgJTQklCT4JKgkoACAJHQk+CTIJQAAgCTYJPwk1CTgJRwkoCT4ALgAgCRcJMAlNCSYJQAAgCQYJIwk/ACAJIAk+CRUJMAlHACAJOQlHACAJBwklCUcAIAkcCUEJMwkyCUcJMglHACAJFwkjCT8JJAAgCQYJHAkkCT4JFwk+CS8JFQAgCSsJPAk/CTgJFQkfCTIJRwkyCUcAIAkoCT4JOQk/CS8JRwAuAA0ACgkoCTUJTQk1CSYJPwkaCT4AIAkVCT4JMwAsACAJMAk+CTcJTQkfCU0JMAk/CS8AIAkoCUcJJAlNCS8JPgkCCSgJQAAgCS8JPgkkCU0JMAk+ACAJBgkvCUsJHAk/CSQAIAkVCUcJMglNCS8JPgAgCTkJSwkkCU0JLwk+AC4AIAk5CT8JKAlNCSYJQQkkCU0JNQk+CRoJPgAgCQYJNQk+CRwAIAksCUEJMgkCCSYAIAk5CUsJJAAgCTkJSwkkCT4ALgAgCQ8JFQkaACAJMgkVCU0JNwlNCS8AICAcCTAJPgkuACAJLgkCCSYJPwkwIB0ALgAgCTYJPwk1CTgJRwkoCUcJKAlHCTkJPwAgCTkJPwkCCSYJQgkkCU0JNQk+CRoJPgAgCQUJAgkXCT4JMAAgCTkJPgkkCT4JJAAgCRgJRwkkCTIJRwkyCT4ALgAgCTYJRwk1CR8JPwAgCSQJRwAgCR0JPgkyCUcJGgAuACAJLAk+CSwJMAlAACAJLgk4CU0JHAk/CSYAIAkGCSEJNQlAACAJFQlHCTIJQAAgCRcJRwkyCUAALgAgCSQJTQkvCT4AIAkoCQIJJAkwACAJCQk4CTMJMgk+ACAJJAlLACAJDwkVCRoAIAkmCQIJFwk+AC4AIAkuCT8AIAkuCT8AIAkuCU0JOQkjCSMJPgkwCUcAIAkGCSMJPwAgCTgJTQk1CSQJAwkyCT4AIAk5CT8JAgkmCUIJGglHACAJKAlHCSQJRwAgCS4JTQk5CSMJNQlBCSgAIAkYCUcJIwk+CTAJTQkvCT4JAgkaCUcAIAk5CT8AIAkqCTAJPwk4CU0JJQk/CSQJQAAgCSwJGAlBCSgAIAknCT4JLAlHACAJJgkjCT4JIwkyCUcALgAgCSQJTQkvCT4JKAlAACAJOAkwCTMJOAlLCR8AIAkcCTUJPgksCSYJPgkwCUAAIAkoCT4JFQk+CTAJMglAAC4AIAkvCT4JJAAgCQYJLglNCTkJPwAgCSgJNQlNCTkJJAlLAC4AIAkvCT4JJAAgCQYJLgkaCT4AIAkPCRUJOQlAACAJLgk+CSMJQQk4ACAJKAk1CU0JOQkkCT4AIAkFCTgJJAlACTIAIAkkCTAAIAkkCUcAIAkFCTgJJAlACTIAICAcCTYJPwk1CTgJSAkoCT8JFSAcAC4AIAkkCU0JLwk+ACAJNQlHCTMJPwAgCSwJPgkzCT4JOAk+CTkJRwksCT4JAgkoCT4AIAk1CT8JGgk+CTAJMglHACAJFwlHCTIJRwAuAC4ADQAKIBwJFQk+CS8AIAk5CUcAIAkkCUEJLgkaCUcAIAk2CT8JNQk4CUgJKAk/CRUAIAk5CUsJJAlHAD8gHQANAAoJLwk+ACAJNQlHCTMJPwAgCSwJPgkzCT4JOAk+CTkJRwksACAJOAk5CRwAIAkuCU0JOQkjCUEJKAAgCRcJRwkyCUcAIAkFCTgJJAlHACAJFQk/ACAJOQlHACAJBgkuCRoJRwAgCRUJSwkjCRoAIAkoCTUJTQk5CUcJJCAmAA0ACgkqCSMAIAkbCUcALgAuACAJNgk/CTUJOAlICSgJPwkVCT4JAgkoCT4AIAkPCRUJHwlHACAJHwk+CRUJQQkoACAJJglHCSMJPgkwCT4AIAk5CT4AIAkoCUcJJAk+CRoAIAkoCTUJTQk5CUcALgAgCSQJTQkvCT4JKAlHACAJOAkCCSoJQQkwCU0JIwkqCSMJRwAgCTYJPwk1CTgJSAkoCT8JFQk+CQIJGglAACAJOAk+CSUAIAkmCT8JMglAAC4AIAkGCSMJPwAgCQcJJQlHCRoAIAkvCT4AIAkoCUcJJAlNCS8JPgkoCUAAIAk4CT4JAgkXCUAJJAkyCUcALgAuAA0ACiAcCTkJRwAgCSwJPgksCTAJQAAgCSoJPgkhCSMJPgkwCUcAIAkcCTAAIAkuCT4JHQlHACAJNgk/CTUJOAlICSgJPwkVACAJBQk4CSQJQAkyACAJJAkwACAJLgkyCT4AIAkkCU0JLwk+CQIJGgk+ACAJBQktCT8JLgk+CSgAIAkGCTkJRwAuIB0AIAAoCTkJRwAgCQUJOAlHACAgGQk4CU0JHwlHCR8JLglHCQIJHwlNIBkAIAkmCU0JLwk+CS8JGglHACAJJwk+CSEJOAAgCRUJSwkjCU0JLwk+ACAJKAlHCSQJTQkvCT4JJAAgCQUJOAlHCTIAPwApAA0ACgk5CT4AIAk5CT8JKAlNCSYJQQkkCU0JNQk+CRoJPgAgCQUJAgkXCT4JMAAgCS0JMglNCS8JPgktCTIJTQkvCT4JAgkoCT4AIAkqCUcJMgk1CTIJPgAgCSgJPgk5CUAAIAkFCSoJNQk+CSYAIAkVCUcJNQkzACAJDwkVCRoALgAuACAJLAk+CTMJPgk4CT4JOQlHCSwAIAkgCT4JFQkwCUcALgANAAoJLglBCQIJLAkICSQAIAkmCQIJFwkyACAJCQk4CTMJMgk/ACAJOQlLCSQJQAAgCW8JaQAgCTgJPgkyCUAALgAgCSQJTQkvCT4AIAk1CUcJMwk/ACAJFQlHCTUJMwAgCQYJIwk/ACAJFQlHCTUJMwAgCTYJPwk1CTgJSAkoCT8JFQk+CQIJLglBCTMJRwkaACAJLglBCQIJLAkIACAJNQk+CRoJMglAACAJOQlLCSQJQAAuACAJOAkXCTMJQAAgCSwJPgkzCT4JOAk+CTkJRwkCCRoJQAAgCRUJIQk1CR8AIAk2CT8JOAlNCSQALAAgCSwJQQkyCQIJJgAgCTkJPwkoCU0JJglBCSQJTQk1CT4JGgk+ACAJLAlBCTIJAgkmACAJBgk1CT4JHAAgCTYJPwk1CTgJRwkoCT4ALgANAAoJHAlHACAJFQlLCSMJJAk+CTkJQAAgCSgJRwkkCT4AIAkcCT4JOQk/CTAAIAkqCSMJRwAgCSwJSwkyCSMJPgkwACAJKAk+CTkJPwAgCSQJRwkaACAJOQk+ACAJKAlHCSQJPgAgCQUJFwkmCUAAIAk4CTkJHAAgCSoJIwlHACAJLAlLCTIJQQkoACAJHAk+CSQJSwAuACAJFQk+CTAJIwAgCQ8JFQkaACAgGQkGCTkJRwAgCRYJMAlHACAJJAkwACAJFQk+ACAJLAlLCTIJQQAgCSgJLwlHAD8gGQAgCQYJIwk/ACAJNQk/CRoJPgkwACAJDwkVCTIJTQkvCT4JNQkwACAJFQlLCSMJPwk5CUAAIAkuCU0JOQkjCUcJMgAuAC4JBQkXCSYJPwAgCS4JPgkdCU0JLwk+ACAJLgkoCT4JJAkyCUcAIAksCUsJMgkyCT4ALgAgCRUJPgk5CT8AIAk4CTAJFQk+CTAJPwAgCRUJPgkuCUcAIAk5CUsJJAAgCSgJPgk5CT8JJAAgCSgJQQk4CSQJTQkvCT4AIAkrCTwJPgkICTIJQAAgCRcJSwkzCT4AIAk5CUsJJAk+CSQALgAuCRUJPgkuACAJFQlLCSMAIAkVCTAJIwk+CTAAPwAgCRUJPgkuCQIAIAkVCT4AIAk5CUsJJAAgCSgJPgk5CT8JJAA/ACAJLwk+ACAJNQlHCTMJPwAgCS8JPgAgCSgJRwkkCU0JLwk+CSgJRwAgCTgJPgkCCRcJPwkkCTIJRwAgCQUJMAlHACAJLwk+ACAJKwk8CT4JLwkyCUAAIAkoCUEJOAkkCU0JLwk+ACAJFwlLCTMJPgAgCRUJMAlBCSgAIAkVCT4JLwAgCSAJRwk1CSQJPgkvACAJLgkCCSQJTQkwCT4JMgkvCT4JJAAuACAJHAkwACAJLwk+ACAJKwk8CT4JLwkyCUAAIAkuCQIJJAlNCTAJPgkyCS8JPgkkACAJKAlBCTgJJAlNCS8JPgAgCSoJIQlBCSgAIAkwCT4JOQkjCT4JMAAgCQUJOAkkCUAJMgAgCSQJMAAgCQYJFwAgCTIJPgk1CUAJKAAgCS4JAgkkCU0JMAk+CTIJLwk+CTIJPgAuACAJLQlBCRUJAgkqACAJHQk+CTIJPgAgCTkJSwkkCT4AIAktCUEJFQkCCSoAIAkvCT4AICAZCTgJTQkfCUcJHwkuCUcJAgkfIBkJNQkwAC4ADQAKCSoJPgkVCT8JOAlNCSQJPgkoCRoJTQkvCT4AIAkGCSQJAgkVCTUJPgkmCT8AIAkVCT4JMAk1CT4JLwk+ACAJFglBCSoJGgAgCTUJPgkiCTIJTQkvCT4AIAk5CUsJJAlNCS8JPgAuACAJKAlBCTgJJAlAACAJGAlBCTgJFglLCTAJQAAgCTkJSwkkACAJOQlLCSQJQAAuACAJBgkjCT8AIAkvCT4AIAk4CTAJFQk+CTAJGglHACAJFQk+CS8AIAkaCT4JMglBACAJOQlLCSQJRwAgCSQJMAAgCSoJPgkVCT8JOAlNCSQJPgkoCRoJTQkvCT4AIAkfCT8JLgAgCTIJPgAgCRUJTQkwCT8JFQlHCR8AIAkWCUcJMwk+CS8JMgk+ACAJLAlLCTIJNQk+CS8JGglHACwAIAksCT4JMwk+CTgJPgk5CUcJLAk+CQIJGgk+ACAJMAlLCRYJIAlLCRUAIAk4CTUJPgkyAC4ALgkFCTAJRwAgCS8JPgAgCSYJRwk2CT4JGglNCS8JPgAgCQ8JNQkiCU0JLwk+ACAJBgkkCQIJFQk1CT4JJgk/ACAJFQk+CTAJNQk+CS8JPgAgCTUJPgkiCTIJTQkvCT4AIAkFCTgJJAk+CSgJPgAgCRUJOAkyCU0JLwk+ACAJFQlNCTAJPwkVCUcJHwAgCRYJRwkzCSMJTQkvCT4JGglNCS8JPgAgCSwJPgkkCT4AIAkVCTAJJAk+AD8AIAk5CUcAIAk5CUsJJAk+ACAJFQk+CS4JPgAgCSgJLwlHAC4AIAkGCSMJPwAgCSwJPgkzCT4JOAk+CTkJRwksCT4JAgkoCUAAIAkPCRUJJgk+CRoAIAk4CT4JAgkXCUAJJAkyCUcADQAKIBwJLglAACAJLglBCQIJLAkICSQAIAkqCT4JFQk/CTgJTQkkCT4JKAkaCU0JLwk+ACAJHwk/CS4JMgk+ACAJFglHCTMJQQkoACAJJglHCSMJPgkwACAJKAk+CTkJPwAuIB0ADQAKCSQJTQkvCT4AIAk1CUcJMwlHACAJKgk+CTgJQQkoACAJJAlHACAJBgkcCRoJTQkvCT4AIAkmCT8JNQk4CT4JKgkwCU0JLwkCCSQAIAkqCT4JFQk/CTgJTQkkCT4JKAAgCR8JPwkuCSgJRwAgCS4JQQkCCSwJCAkkACAJKgk+CQoJMgAgCSAJRwk1CTIJRwkyCUcAIAkoCT4JOQk/ACwAIAkFCTAJRwAgCScJPgkhCTgJGgAgCSgJPgk5CT8ALgAgCRUJSwkjACAJLwk+ACAJBQkCCRcJPgkwCT4JNglAACAJFglHCTMJIwk+CTAAPwANAAoJLwk+ACAJLAk+CTMJPgk4CT4JOQlHCSwJPgkCCSgJPwAgCQUJKAlHCRUAIAkqCT8JIglNCS8JPgAgCSoJPgk5CT8JMglNCS8JPgAgCRgJIQk1CTIJTQkvCT4ALAAgCTYJPwk1CTgJSAkoCT8JFQAgCRgJIQk1CTIJRwAuACAJOQlHACAJNgk/CTUJOAlICSgJPwkVACAJLAk+CTMJPgk4CT4JOQlHCSwJPgkCCTgJPgkgCT8AIAkcCT8JNQAgCTkJPwAgCSYJTQkvCT4JLwkyCT4AIAkkCS8JPgkwAC4AIAkVCUcJNQkzACAJLAk+CTMJPgk4CT4JOQlHCSwJPgkCCRoJPgAgCQYJJglHCTYAIAkGCTkJRwAgCS4JTQk5CSMJQQkoACAJBgkqCTIJTQkvCT4AIAkcCT8JNQk+CRoJQAAgCSsJPAk/CRUJQAkwACAJKAAgCRUJMAkkCT4AIAkFCSgJRwkVACAJNgk/CTUJOAlICSgJPwkVCT4JAgkoCUAAIAkGCSoJMglHACAJMAkVCU0JJAAgCTgJPgkCCSEJMglHACAJBgk5CUcALgAgCTkJRwAgCRUJRwk1CTMAIAkGCSMJPwAgCRUJRwk1CTMAIAksCT4JMwk+CTgJPgk5CUcJLAk+CQIJGglNCS8JPgAgCSoJTQkwCUcJLgk+CSoJSwkfCT8ALgAgCRwJPwk1CT4JMgk+ACAJHAk/CTUAIAkmCUcJIwk+CTAJPwAgCTIJPgkWCUsAIAkuCT4JIwk4CUcALgANAAogHAkVCUcJNQkzACAJDwkVACAJBgkmCUcJNgAgCSYJTQkvCT4AIAk4CT4JOQlHCSwAIAkcCT8JNQk+CRoJQAk5CUAAIAkqCTAJTQk1CT4AIAkVCTAJIwk+CTAAIAkoCT4JOQk/IB0AIAk5CT4AIAk2CSwJTQkmACAJBgk5CUcAIAk2CT8JNQk4CUgJKAk/CRUJPgkaCT4ALgANAAoJLAk+CTMJPgk4CT4JOQlHCSwAIAkPCRUAIAkFCTgJAgAgCTUJTQkvCRUJTQkkCT8JLgkkCU0JNQAgCRUJPwAgCRwJTQkvCT4JGglAACAJEwkzCRYAIAkVCTAJQQkoACAJJglHCSMJTQkvCT4JGglAACAJFwkwCRwAIAkoCT4JOQk/AC4AIAkFCRYJTQkWCUcAIAkuCTkJPgkwCT4JNwlNCR8JTQkwACAJJAlNCS8JPgkCCSgJPgAgCTgJPgk5CUcJLAAgCS8JPgAgCSgJPgk1CT4JKAlAACAJEwkzCRYJJAlLAC4AIAkPCRUJHwk+ACAJLgk+CSMJQQk4ACwAIAkPCRUAIAkcCU0JNQkyCQIJJAAgCTUJPwkaCT4JMAAgCS4JKAk+CTYJQAAsACAJBQkCCRcJPgkwACAJLglBCRYJPgk2CUAAIAkYCUcJCgkoACAJDwkVACAJOAkCCRgJHwkoCT4AIAksCSgJNQkkCUsAICAcCTYJPwk1CTgJRwkoCT4gHQAuACAJBgkcACAJNgk/CTUJOAlHCSgJPgkaCT4AIAk1CT8JGgk+CTAAIAkVCUcJMglNCS8JPgAgCTYJPwk1CT4JLwAgCQ8JFQAgCTkJPwAgCTAJPgkcCRUJPwkvACAJKAk/CTAJTQkjCS8AIAkYCUcJJAkyCT4AIAkcCT4JJAAgCSgJPgk5CT8AIAkPCTUJIgk/ACAJKglNCTAJGgkCCSEAIAkkCT4JFQkkAC4AIAkPCRUJHwlNCS8JPgAgCS4JPgkjCTgJPgkaCU0JLwk+ACAJBgk1CT4JHAk+CSgJRwAgCQkJLQk+ACAJKglHCR8JMglHCTIJPgAgCS4JOQk+CTAJPgk3CU0JHwlNCTAAIAk2CT4JAgkkACAJOQlLCQoAIAk2CRUJJAlLACAJJAkwACAJNgk+CQIJJAAgCS4JOQk+CTAJPgk3CU0JHwlNCTAAIAkqCUcJHwlBACAJNgkVCSQJSwAuAA0ACgkPCRUAIAkuCT4JIwlBCTgAIAkqCUEJMAlNCSMAIAk2CT8JNQk+CRwJQAAgCSoJPgkwCU0JFQAtIB0JNgk/CTUJJAk/CTAJTQklIB0AIAkWCRoJPgkWCRoAIAktCTAJNQlBCRoAIAkVCTgJRwAgCTYJFQkkCUsALAAgCSQJRwk5CT8AIAkFCSgJRwkVACAJNQkwCU0JNwlHACAJOAkyCRcAIAk5CUcAIAkFCRwJQQkoACAJKAAgCTgJQQkfCTIJRwkyCUcAIAkVCUsJIQlHCRoALgAgCS4JTQk5CSMJQQkoCRoAIAksCT4JMwk+CTgJPgk5CUcJLAAgCSAJPgkVCTAJRwAgCTkJRwAgCSgJQQk4CSQJRwAgCTUJTQkvCRUJTQkkCT8JLgkkCU0JNQAgCSgJOAlBCSgAIAkPCRUAIAkaCS4JJAlNCRUJPgkwACAJBgk5CUcJJAAuAA0ACgkuCTAJPgkgCT8AIAkFCTgJTQkuCT8JJAlHCRoJQAAgCQYJFwAgCRwJTQkvCT4JKAlHACAJLgk5CT4JMAk+CTcJTQkfCU0JMAk+CSQJMglNCS8JPgAgCS4JMAk+CSAJPwAgCS4JPgkjCTgJPgkkACAJJwkXCScJFwkkACAJIAlHCTUJMglAACAJBQk2CU0JLwk+ACAJNQlNCS8JFQlNCSQJPwkuCSQJTQk1CT4JOAAgCS4JPgkdCUcAIAkqCU0JMAkjCT4JLgAsACAJJAlNCS8JPgkCCRoJPgAgCQYJJgkwCU0JNgAgCRgJRwkKCSgAIAkuCTkJPgkwCT4JNwlNCR8JTQkwACAJGAkhCTUJPgkvCRoJPgAgCSoJTQkwCS8JJAlNCSgAIAkVCTAJQQkvCT4ALgANAAoJHAkvACAJLgk5CT4JMAk+CTcJTQkfCU0JMAAuAA0ACg=="
}
function getData(jsonForm){
var el = document.querySelector('form[name='+jsonForm+']');
var inputs = el.querySelectorAll('input,select,textarea');
var data = {};
for(var i=0; i< inputs.length; i++){
switch(inputs[i].type){
case 'file':
var file = inputs[i].files[0];
if(file){
var oReader = new FileReader();
(function(i){
oReader.onload = function(e){
data[inputs[i].name] = e.target.result;
alert(JSON.stringify(data));
document.querySelector('p').innerHTML = JSON.stringify(data);
console.dir(data);
};
oReader.readAsDataURL(file);
})(i)
}
break;
case 'checkbox':
data[inputs[i].name] = inputs[i].checked;
break;
default:
data[inputs[i].name] = inputs[i].value;
}
}
document.querySelector('p').innerHTML = JSON.stringify(data);
}form{width: 400px}<form name="jsonForm">
<input type="text" name="firstname" value="John" />
<input type="text" name="surname" value="doe" />
<input type="email" name="email" value="[email protected]" />
M: <input type="radio" name="gender" value="male" checked/>
F: <input type="radio" name="gender" value="female" />
subscribe: <input type="checkbox" name="subscribe" checked/>
<input type="file" name="upload" />
<select name="selection"><option value=M>M</option><option value=J>J</option></select>
<textarea name="description"></textarea>
</form>
<hr/>
<input type=button value="getData" onclick=getData('jsonForm')>
<p><p>回答by Moob
Late to the party, but this is how I do it:
聚会迟到了，但这就是我的做法：
(function getFormData(){
var form, inputs, formData = {}, outputdiv;
(function init(){
outputdiv = document.getElementById("output");
output();
})();
function build(){
form = document.querySelector("form"),
inputs = form.querySelectorAll("input, select, textarea"),
formData = {},
arr = [];
for(var i=0; i< inputs.length; i++){
var input = inputs[i];
input.onchange = function(){output();};
if(input.type=='radio'){
if(input.checked){
arr.push(input.name,input.value);
}
} else if(input.type=='checkbox'){
if(input.checked){
arr.push(input.name,input.value);
}
} else if(input.multiple){
//find each selected child
var options = input && input.options;
for (var o=0; o<options.length; o++) {
var opt = options[o],
val = (opt.value || opt.text)
if (opt.selected) {
arr.push(input.name,val);
}
}
} else {
arr.push(input.name,input.value);
}
}
var formdata = JSON.stringify(arr);
return formdata;
}
function output(){
outputdiv.innerHTML = build();
}
})()<form>
<input type="text" name="text1" value="" />
<input type="text" name="text2" value="" />
<input type="email" name="text3" value="" />
<br />
<input type="radio" name="radio" value="radio1" />
<input type="radio" name="radio" value="radio2" />
<input type="radio" name="radio" value="radio3" />
<br />
<input type="checkbox" name="checkboxes" value="checkbox1" />
<input type="checkbox" name="checkboxes" value="checkbox2" />
<input type="checkbox" name="checkboxes" value="checkbox3" />
<br />
<textarea name="textarea"></textarea>
<br />
<select name="option">
<option value="">options</option>
<option>option text</option>
<option value="option 2 value">option 2 text</option>
<option>option 3 text</option>
</select>
<br />
<select multiple="true" name="options">
<option>opt multi 1</option>
<option value="opt multi 2 value">opt multi 2</option>
<option>opt multi 3</option>
</select>
</form>
<div id="output"></div>