How can I get form data with JavaScript/jQuery?

Question

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?

For example:

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

Output:

{     "foo": "1",     "bar": "xxx",     "this": "hi" } 

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

$("#form input").each(function () {     data[theFieldName] = theFieldValue; }); 

Answer 1

Use $('form').serializeArray(), which returns an array:

[   {"name":"foo","value":"1"},   {"name":"bar","value":"xxx"},   {"name":"this","value":"hi"} ] 

Other option is $('form').serialize(), which returns a string:

"foo=1&bar=xxx&this=hi" 

Take a look at this jsfiddle demo

Answer 2

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi" 

demo