How to get a key/value data set from a HTML form

Question

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).

Answer 1

When I originally wrote this answer FormData was not widely supported (and this was called out explicitly in the question). Now that it's been 6 years, FormData has excellent cross-browser support.

Because of this, I highly recommend using FormData directly to access data or serialize data to the server.

Jake Archibald has an excellent post describing FormData (and URLSearchParams) in depth, which I won't attempt to reproduce here, however I will include a few snippets that are relevant:

You can populate FormData state directly:

const formData = new FormData();
formData.set('foo', 'bar');
formData.set('hello', 'world');

...you can read an HTML form directly as FormData:

const formElement = document.querySelector('form');
const formData = new FormData(formElement);
console.log(formData.get('username'));

...you can use FormData directly as a fetch body:

const formData = new FormData();
formData.set('foo', 'bar');
formData.set('hello', 'world');

fetch(url, {
  method: 'POST',
  body: formData,
});

I recommend reading Jake's post in full and using the APIs that come with the browser over adding more code to build a less-resilient version of the same thing.

---

My original post preserved for posterity's sake:

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

Answer 2

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

Answer 3

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

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

Answer 5

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.

Answer 6

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

Answer 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":"[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>

Answer 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>

Answer 9

If you need object of {key: value, ...}

const form = document.getElementById("your-form")

const formEntries = new FormData(form).entries();
const formData = Object.assign(...Array.from(formEntries, ([name, value]) => ({[name]: value})));

console.log(formData)