Pfthb

Here's a way to do it in a more functional style, without the use of a library.

Array.from(formData.entries()).reduce((memo, pair) => (
 ...memo,
 [pair[0]]: pair[1],
), );

Example:

document.getElementById('foobar').addEventListener('submit', (e) => 
 e.preventDefault();

 const formData = new FormData(e.target);
 const data = Array.from(formData.entries()).reduce((memo, pair) => (
 ...memo,
 [pair[0]]: pair[1],
 ), );
 document.getElementById('output').innerHTML = JSON.stringify(data);
);

<form id='foobar'>
 <input name='baz' />
 <input type='submit' />
</form>

<pre id='output'>Input some value and submit</pre>

If you have multiple entries with the same name, for example if you use <SELECT multiple> or have multiple <INPUT type="checkbox"> with the same name, you need to take care of that and make an array of the value. Otherwise you only get the last selected value.

Here is the modern ES6-variant:

function formToJSON( elem ) 
 let output = ;
 new FormData( elem ).forEach(
 ( value, key ) => 
 // Check if property already exist
 if ( Object.prototype.hasOwnProperty.call( output, key ) ) 
 let current = output[ key ];
 if ( !Array.isArray( current ) ) 
 // If it's not an array, convert it to an array.
 current = output[ key ] = [ current ];
 
 current.push( value ); // Add the new value to the array.
 else 
 output[ key ] = value;
 
 
 );
 return JSON.stringify( output );

Slightly older code (but still not supported by IE11, since it doesn't support ForEach or entries on FormData)

function formToJSON( elem ) 
 var current, entries, item, key, output, value;
 output = ;
 entries = new FormData( elem ).entries();
 // Iterate over values, and assign to item.
 while ( item = entries.next().value )
 
 // assign to variables to make the code more readable.
 key = item[0];
 value = item[1];
 // Check if key already exist
 if (Object.prototype.hasOwnProperty.call( output, key)) 
 current = output[ key ];
 if ( !Array.isArray( current ) ) 
 // If it's not an array, convert it to an array.
 current = output[ key ] = [ current ];
 
 current.push( value ); // Add the new value to the array.
 else 
 output[ key ] = value;
 
 
 return JSON.stringify( output );
 

You can achieve this by using the FormData() object. This FormData object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.

Example:

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event)

 event.preventDefault();
 var formData = new FormData(myForm),
 result = ;

 for (var entry of formData.entries())
 
 result[entry[0]] = entry[1];
 
 result = JSON.stringify(result)
 console.log(result);

);

Easy To Use Function

I Have Created A Function For This

function FormDataToJSON(FormElement) 
 var formData = new FormData(FormElement);
 var ConvertedJSON= ;
 for (const [key, value] of formData.entries())
 
 ConvertedJSON[key] = value;
 

 return ConvertedJSON

Example Usage

var ReceivedJSON = FormDataToJSON(document.getElementById('FormId');)

In this code I have created empty JSON variable using for loop I have used keys from formData Object to JSON Keys in every Itration.

You Find This Code In My JS Library On GitHub Do Suggest Me If It Needs Improvement I Have Placed Code Here https://github.com/alijamal14/Utilities/blob/master/Utilities.js

FormData method .entries and the for of expression is not supported in IE11 and Safari.

Here is a simplier version to support Safari, Chrome, Firefox and Edge

function formDataToJSON(formElement) 
 var formData = new FormData(formElement),
 convertedJSON = ;

 formData.forEach(function(value, key) 
 convertedJSON[key] = value;
 );

 return convertedJSON;

Warning: this answer doesn't work in IE11.

FormData doesn't have a forEach method in IE11.

I'm still searching for a final solution to support all major browsers.

If you are using lodash it can be done concisely with fromPairs

import fromPairs from 'lodash';

const object = fromPairs(Array.from(formData.entries()));

This post is already a year old... but, I really, really like the ES6 @dzuc answer. However it is incomplete by not been able to handle multiple selects or checkboxes. This has already pointed and code solutions has been offered. I find them heavy and not optimized. So I wrote a 2 versions based on @dzuc to handle these cases:

• For ASP style forms where multiple items name could just simple repeated.

let r=Array.from(fd.entries()).reduce(
 (o , p) => (
 (!o[p[0]])
 ? ...o , [p[0]] : p[1]
 : ...o , [p[0]] : [...o[p[0]] , p[1]]
 )
 ,
);
let obj=JSON.stringify(r);

One line Hotshot version:

Array.from(fd.entries()).reduce((o,p)=>((!o[p[0]])?...o,[p[0]]:p[1]:...o,[p[0]]:[...o[p[0]],p[1]]),);

• For PHP style forms where the multiple item names must have a suffix.

let r=Array.from(fd.entries()).reduce(
 (o , p) => (
 (p[0].split('[').length>1)
 ? (p[0]=p[0].split('[')[0]
 , (!o[p[0]])
 ? ...o , [p[0]] : [p[1]]
 : ...o , [p[0]] : [...o[p[0]] , p[1] ]
 )
 : ...o , [p[0]] : p[1]
 )
 ,
);
let obj=JSON.stringify(r);

One line Hotshot version:

Array.from(fd.entries()).reduce((o,p)=>((p[0].split('[').length>1)?(p[0]=p[0].split('[')[0],(!o[p[0]])?...o,[p[0]]:[p[1]]:...o,[p[0]]:[...o[p[0]],p[1]]):...o,[p[0]]:p[1]),);

You can try this

formDataToJSON($('#form_example'));

# Create a function to convert the serialize and convert the form data
# to JSON
# @param : $('#form_example');
# @return a JSON Stringify
function formDataToJSON(form) 
 let obj = ;
 let formData = form.serialize();
 let formArray = formData.split("&");

 for (inputData of formArray)
 let dataTmp = inputData.split('=');
 obj[dataTmp[0]] = dataTmp[1];
 
 return JSON.stringify(obj);

Even though the answer from @dzuc is already very good, you could use array destructuring (available in modern browsers or with Babel) to make it even a bit more elegant:

// original version from @dzuc
const data = Array.from(formData.entries())
 .reduce((memo, pair) => (
 ...memo,
 [pair[0]: pair[1],
 ), )

// with array destructuring
const data = Array.from(formData.entries())
 .reduce((memo,[key, value]) => (
 ...memo,
 [key]: value,
 ), )