问题
I'm simply looking for a way to get all the values from a <form>.
I searched the Web for a while, stumbling across FormData, which seems quite what I'm looking for.
However its API is not available on any browser, so I need an alternative.
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).
回答1:
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():
$('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 serializeArray just won't do.
The next difficulty comes from determining what level of browser support is required. HTMLFormElement.elements significantly simplifies a serialization implementation, and selecting the form-associated elements without it is quite a pain.
Consider:
<form id="example">...</form>
<input type="text" form="example" name="lorem" value="ipsum"/>
A conforming implementation needs to include the input element. I will assume that I can use it, and leave polyfilling it as an exercise to the reader.
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.
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:
[
{
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));
回答2:
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:
var formObjects = $("form :input");
formObjects.each(
function(){
formData[$(this).attr("name")] = $(this).val(); /*setting up name/value pairs */
}
);
in this code formObjects contains all input, select and textarea and 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] )
But if you use jQuery you can directly use jQuery's serialize() function to grab the whole form by name-value pairs.
var url_friendly_name_value_string = $("form").serialize();
回答3:
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.
You can refer this answer which is similar to what you are looking for: Convert form data to JavaScript object with jQuery
回答4:
Just use jQuery.
HTML:
<form id="my-form">
<input type="text" name="my-field" />
</form>
JS:
var data = $('form#my-form').serializeArray(); // [{'my-field': 'value'}]
$.ajax({
data: data
//other config goes here
});
回答5:
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.
JS Fiddle
$(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));
});
});
回答6:
I'm suggesting you to use css selectors for selecting the inputs from your form: querySelector and querySelectorAll. Here's the working code and here's the js code.
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.
回答7:
Here is the pure javascript solution which gives the required output for all kind of inputs in a form including files.
Sample output
{
"firstname":"John",
"surname":"doe",
"email":"abc@gmail.com",
"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="abc@gmail.com" />
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>回答8:
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>来源：https://stackoverflow.com/questions/30964568/how-to-get-a-key-value-data-set-from-a-html-form