By Yisroel


2009-07-26 13:39:54 8 Comments

How do I convert all elements of my form to a JavaScript object?

I'd like to have some way of automatically building a JavaScript object from my form, without having to loop over each element. I do not want a string, as returned by $('#formid').serialize();, nor do I want the map returned by $('#formid').serializeArray();

30 comments

@test30 2017-10-20 16:08:48

Another answer

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})
<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData

@user3658510 2018-03-22 13:33:23

A more modern way is to use reduce with serializeArray() in this way:

$('#formid').serializeArray()
    .reduce((a, x) => ({ ...a, [x.name]: x.value }), {});

It will help for many of the 'normal' cases.

For the very common instance where there are multiple tags with duplicate name attributes, this is not enough.

Since inputs with duplicate name attributes are normally inside some 'wrapper' (div, ul, tr, ...), like in this exemple:

  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>
  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>

one can use reduce with the map operator to iterate on them:

$(".wrapperClass").map(function () {
  return $(this).find('*').serializeArray()
    .reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
}).get();

The result will be an array of objects in the format:

  [
    {
      one: valueOfOne,
      two: valueOfTwo
    }, {
      one: valueOfOne,
      two: valueOfTwo
    }
  ]

The .get() operator is used in conjunction with map to get the basic array instead of the jQuery object which gives a cleaner result. jQuery docs

@Bhavik Hirani 2016-08-31 11:35:36

Width all Given Answer there some problem which is...

If input name as array like name[key], but it will generate like this

 name:{
   key : value
 }

For Example : If i have form like this.

    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
    </form>

Then It will Generate Object like this with all given Answer.

Object {
    name : 'value',
    name1[key1] : 'value1',
    name2[key2] : 'value2',
    name3[key3] : 'value3', 
}

But it have to Generate like below,anyone want to get like this as below.

Object {
    name : 'value',
    name1 : {
        key1 : 'value1'
    },
    name2 : {
        key2 : 'value2'
    },
    name3 : {
        key2 : 'value2'
    }
}

Then Try this below js code.

(function($){
    $.fn.getForm2obj = function(){
        var _ = {},_t=this;
        this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
        this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); };
        $.map(this.serializeArray(),function(n){
            if(n.name.indexOf('[') > -1 ){
                var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
                $.map(keys,function(key,i){
                    if(key == ''){
                        eval("ale = Object.keys("+tmp+").length;");
                        if(!ale) _t.b(tmp,'[]');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
                        else _t.b(tmp += "["+ale+"]",'{}');
                    }else{
                        _t.c(tmp += "['"+key+"']",'{}');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
                    }
                });
            }else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
        });
        return _;
    }
})(jQuery);
$('form').getForm2obj();

@Leonardo Beal 2018-02-14 16:06:39

This answer does cover the case mentioned, but it does not cover cases like checkbox[] or even one[another][another_one]

@Bhavik Hirani 2018-02-27 19:30:28

@LeonardoBeal i fix my ans .. check this now ..!

@test30 2017-10-16 11:35:57

One-liner (no dependencies other than jQuery), uses fixed object binding for function passsed to map method.

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

What it does?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

suitable for progressive web apps (one can easily support both regular form submit action as well as ajax requests)

@Folkmann 2017-10-08 13:59:47

So I used the accepted answer and found a major flaw.
It doesn't support input arrays like:

<input type="checkbox" name="array[]" value="1"/>
<input type="checkbox" name="array[]" value="2"/>
<input type="checkbox" name="array[]" value="3"/>

This minor change should fix that:

function objectifyForm(inp){
    var rObject = {};
    for (var i = 0; i < inp.length; i++){
        if(inp[i]['name'].substr(inp[i]['name'].length - 2) == "[]"){
            var tmp = inp[i]['name'].substr(0, inp[i]['name'].length-2);
            if(Array.isArray(rObject[tmp])){
                rObject[tmp].push(inp[i]['value']);
            } else{
                rObject[tmp] = [];
                rObject[tmp].push(inp[i]['value']);
            }
        } else{
            rObject[inp[i]['name']] = inp[i]['value'];
        }
    }
    return rObject;
}

Remember to pass it the output from $(this).serializeArray(); otherwise it wont work.

@Tobias Cohen 2009-07-27 03:38:41

serializeArray already does exactly that. You just need to massage the data into your required format:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

Watch out for hidden fields which have the same name as real inputs as they will get overwritten.

@Yisroel 2009-07-27 16:15:05

as tvanfosson says, why iterate over the collection twice?

@Tobias Cohen 2009-07-28 03:05:06

Do you mean "why use serializeArray to get the data in the first place?" Because serializeArray is already written, is unit tested in multiple browsers, and could theoretically be improved in later versions of jQuery. The less code you write that has to access inconsistent things like DOM elements directly, the more stable your code will be.

@Matt Gardner 2009-08-18 21:52:22

Thanks Tobias, was looking for a best practice.

@Samuel Meacham 2010-07-18 23:54:44

Be warned, serializeArray() will not include disabled elements. I often disable input elements that are sync'd to other elements on the page, but I still want them included in my serialized object. You're better off using something like $.map( $("#container :input"), function(n, i) { /* n.name and $(n).val() */ } ); if you need to include disabled elements.

@Morteza Milani 2010-09-15 01:26:43

I think you need to add this to your code just after each statement:<pre>this.name=this.name.replace('[]','');</pre> if not, then there would be error in parsing JSON.

@James McCormack 2010-12-23 12:32:57

serializeObject() is half the solution - the other half is the Crockford JSON lib. Full solution is therefore: JSON.stringify($('myForm').serializeObject())

@Andrew Badr 2011-02-22 05:04:48

Samuel Meacham, you may want to use readonly elements instead of disabled ones.

@Frank Nocke 2011-04-05 10:22:19

The $.toJson in your referenced example does not exist (any more). Also even in your sample the inner expression does not catch all form elements (e.g. checkboxes status, ...).

@Daniel X Moore 2011-04-06 20:06:10

This solution contains a bug where "falsy" values such as 0, '', and false won't be serialized correctly. I have posted a fixed solution.

@Shamaila Tahir 2011-10-02 09:11:59

Plugin by Ben Alman can also be used: benalman.com/projects/jquery-misc-plugins/#serializeobject

@Alexey Zakharov 2011-10-26 07:30:49

This doesn't work for general case. It produce invalid results for name="model[property_name]". It also doesn't handle nested properties. name="model[prop_1][prop_2]". So it should not considered as answer.

@maček 2011-12-06 21:57:24

This is so rigid, it's mind-blowing that it ever received more than a couple upvotes.

@Tobias Cohen 2011-12-07 04:33:04

@macek Is there something specific about it that you've found problematic? I wrote this code in about 5 minutes to answer the question as asked, and it seems to have worked fine for the OP, as well as for many others.

@maček 2011-12-07 20:13:45

@TobiasCohen It doesn't handle foo[bar]-type inputs as expected, not to mention most of the other input name varieties. After being very frustrated with shallow solutions to this problem, I ended up writing my own jQuery plugin -- details in the answer I provided to this question.

@Tobias Cohen 2011-12-08 00:47:19

@macek I think you might be looking for an answer to a different question. foo[bar] style input naming is common convention in a number of web frameworks, but it's certainly not a standard part of HTML forms, it's not mentioned in the question, and I've made no attempt to deal with it here.

@Kevin Jhangiani 2012-05-19 06:19:10

@macek The foo[bar] type input is a PHP only parsing thing, but I too find it very useful. Using Tobias's great solution above, I modified it to correctly handle the foo[bar] case. I just whipped this up in about 5 minutes so I'm sure it can be made a lot neater. Okay, it seems I can't post it in a comment, so see my answer below

@maček 2012-05-22 03:35:54

@TobiasCohen, I understand not wanting to support it, but saying it's "not a standard part of HTML forms" is neither correct or a valid counter point. An input named foo[bar] is certainly valid; atop that, adding support for the intended functionality results in a more robust and flexible solution.

@Tobias Cohen 2012-05-22 07:44:29

@macek Could you show me where in the HTML spec it says that inputs named in this format should be treated specially?

@maček 2012-05-22 18:34:13

@TobiasCohen, I never said the HTML spec says they should be treated specially. I was simply arguing that foo[bar]-type names are completely valid and [] is commonly understood to be an array accessor; why not handle them as such? Or to pose it a bit differently, in what scenario would you name an input foo[bar] and not wish to treat foo as an array?

@kroehre 2012-09-08 08:29:18

@macek I know this is a few months old, but since when did do arrays use non-numeric indexes? No one should name an input foo[bar] and hope to treat it as an array. Are you confusing arrays and hashes? Yes, [] is commonly understood to be an accessor but not just for arrays. Also saying it's valid HTML but not in the HTML spec is a contradiction. Yes, the browser may not choke on it, but not many webservers are going to know how to deserialize that like they would an array. Why? Because its not in the HTML spec. Therefore, it is indeed invalid.

@Tony R 2013-01-15 20:40:03

This is great but it doesn't parse data types. It makes all the values strings. Maybe that should be handled elsewhere but it's a caveat to this snippet. Still, amazingly useful for how simple it is. Thanks!

@nilskp 2013-02-13 14:44:15

@Samuel Meacham, I believe you should be using the readonly attribute, not disabled, if you want to include the inputs on the form submission/serialization.

@destan 2013-04-04 11:39:51

jQuery itself should provide this function in most recent next version, don't you think so?

@dewd 2013-05-28 14:53:49

treats a select with only one option selected as a string. where there is potential for mulitple options and only one is selected, it should be treated as an array. i'm working on something to remedy this.

@tothemario 2014-01-08 03:03:29

The jQuery plugin serializeJSON uses serailizeArray under the hood to serialize complex forms into the same format as Rails params: github.com/marioizquierdo/jquery.serializeJSON

@H.M. 2014-04-21 15:19:27

change:case 'checkbox': if (val === 'on' || val === 'checked' || val === true || val === 1) $el.attr('checked', 'checked'); else $el.attr('checked', null);

@Aaron Lozier 2014-06-22 19:01:46

Would like to suggest this improvement: jsfiddle.net/S9MY8/1 The difference is it handles keys in the input name, e.g. name="test[1]" and preserves these in an object. so rather than: "test[]" : ['val1','val2'] you would have: "test" : { 1 : 'val1', 2 : 'val2' } This worked better for my purposes anyway, passing form values into an underscore template.

@Gustavo Gondim 2014-07-14 13:52:59

Shouldn't this code be added to jQuery? It really needs to be implemented.

@ladieu 2014-07-17 14:19:13

I use this function all the time and it works fantastic. Just wanted to counterpoint all the negative feedback. No bulky plugins, works fast and reliably. Support VALID html so that's all I needed.

@victor 2014-12-30 14:34:13

@TobiasCohen, I know this is quite an old thread, but I updated you function to serialize disabled fields as well. Hope it helps!

@jcarlosweb 2015-01-31 20:10:45

@TobiasCohen and for files the type="file". Is it possible?

@tfmontague 2015-05-30 18:03:47

@TobiasCohen - I think Ben Alman provides a better solution: benalman.com/projects/jquery-misc-plugins/#serializeobject. You also use o[this.name] in multiple places, and that should be cached for faster performance: var oname = o[this.name];

@nima 2015-07-29 22:10:34

If you use jquery to post this object to the server, and you have a multiple select on your form, and the name of your control is 'foo', then jquery will send 'foo' if only one item is selected and 'foo[]' if multiple items are selected. This will be very confusing on the server side.

@Zeeshan Cornelius 2015-10-31 16:51:46

You simply rock!

@Selva 2016-01-13 20:59:46

you just saved my valuable time, thank you :)

@Eon 2016-07-19 14:15:01

better than the alternative than to massage an array into a JSON object using string manipulations

@Andrew Day 2017-01-18 14:36:37

@Pablo Contreras 2017-05-25 20:15:40

Thanks a lot, it's just what I was looking for.

@clod986 2017-06-29 17:04:07

Does anyone know if this is still maintained? Should I avoid using it???

@conny 2017-09-08 09:46:39

Modern version of the above: form.serializeArray().reduce(function(acc,cur) { acc[cur.name] = cur.value return acc }, {})

@cstuncsik 2018-02-16 08:48:30

const data = $(form).serializeArray().reduce((acc, next) => ({ ...acc, [next.name]: next.value }), {})

@Harini Sekar 2014-04-07 10:40:06

You can do this:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

See JSON.

@Kashif Nazar 2017-08-09 14:16:50

You are a life saver.

@maček 2011-12-06 22:25:15

Convert forms to JSON LIKE A BOSS


Current source is on GitHub and bower.

$ bower install jquery-serialize-object


The following code is now deprecated.

The following code can take work with all sorts of input names; and handle them just as you'd expect.

For example:

<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

Usage

$('#my-form').serializeObject();

The Sorcery (JavaScript)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

@frontendbeauty 2011-12-29 00:44:02

So, that works pretty well. But it's misnamed: it doesn't return JSON, as the name implies. Instead, it returns an object literal. Also, it's important to check for hasOwnProperty, otherwise your arrays have anything that's attached to their prototype, like: {numbers: ["1", "3", indexOf: function(){...}]}

@julien_c 2012-03-13 17:07:19

@frontendbeauty It would be very cool if you be a little more explicit or even do a pull request on Github for this (I'm not sure what you mean with the hasOwnProperty remark)

@frontendbeauty 2012-03-14 20:45:48

@julien_c re: hasOwnProperty, check out the docs on MDN

@Ryan Florence 2012-05-23 17:21:16

@frontendbeauty actually, toJSON is exactly what the spec says it should be called: developer.mozilla.org/en/JSON#toJSON()_method an unfortunate misnomer.

@RicardoE 2012-12-18 06:56:49

works like a charm! thanks!

@maček 2012-12-20 19:27:00

@frontendbeauty, I never understood your comment. This is using jQuery's .serializeArray() so it's just constructing a new object with key/value pairs; nothing else.

@Marek 2013-01-31 13:03:38

Unfortunately it doesn't work well for <select> with multiple - returns only first selected option value as string instead of array with all selected options.

@maček 2013-01-31 18:14:05

@Marek, I did a test for here on jsfiddle. The trick is to name your select properly. <select name="foo" multiple="multiple"> will not work in any scenario. However, if you use [], as in <select name="bar[]" multiple="multiple">, it will work just fine :)

@rix 2013-09-05 13:15:47

Hi, I made a fiddle using select boxes and can't get this to work - jsfiddle.net/QqT2w/1

@Ivan Hušnjak 2013-09-06 22:31:27

@rix it does not work because jsfiddle refuses to load jquery plugin due to "its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled" I have copied the JS source of jquery plugin which is above in this answer. here is updated demo: jsfiddle.net/ihusnjak/QqT2w/2

@maček 2013-09-09 03:15:45

I didn't realize he left a comment on this answer too. Anyone following @rix's (invalid) bug, please see the github issue

@Șerban Ghiță 2013-09-26 22:22:41

Wanted to point out that github.com/serbanghita/formToObject is a similar JavaScript method (no 3rd party libraries needed) that does the same job. Supports 'multiple', ignores 'disabled' elements.

@SquareCat 2014-02-23 00:34:46

This solution should be on top as it deals with the problem of nested keys as form element names.

@Michael Moser 2014-03-06 22:42:15

I agree that this is the more robust solution. If you have more than just a flat set of data you will need this solution. In my case, I have arrays of sub types (e.g. Reservations have an array of Payments). This solutions returned an array of subdocuments called Payments with each payment attribute. Love it!

@SquareCat 2014-03-09 23:00:12

Today i had a problem with multiple-select fields. If they were empty (=no selection) no value would get sent to the server (this is correct behaviour!), thus the server would not recognize that the selection was (more or less) reset to nothing. So if anyone runs into this problem: i solved it by adding a hidden form field before each multiple-select, with the same name. Therefore if no value is selected in the multiple-select, an empty value with the same form field name is sent to the server and there you can deal with the thing accordingly.

@SquareCat 2014-03-25 22:00:17

I ran into another issue with the function today. I think that i may have found a leak. Author, could you please explain why: jsfiddle.net/VX9RW/1 happens?

@maček 2014-03-25 23:45:12

@SquareCat, If you're referring to the [null,null,...,null,1], this is not a leak. Please see this issue. Also, please update the version of the plugin you're using. I can only afford to support the current version.

@Tim Seguine 2014-07-02 13:07:33

+1 This is clearly the best answer.

@Viktor Kulikov 2015-07-02 09:28:13

thanks for that!

@BlackjacketMack 2015-09-24 12:54:10

How can I use brackets for arrays and dots for properties? Example of form names: <input name='people[0].first' value='Bill', people[0].last='Henderson' /> <input name='people[1].first' value='Jane', people[1].last='Henderson' /> needs to become: {people:[{'first':'Bill','last':'Henderson'},{'first':'Jane'‌​,'last':'Henderson'}‌​]}...This is the way the default model binder in mvc works (and the output is nice and transparent too).

@maček 2015-09-28 04:52:07

@BlackjacketMack all support for this project has moved to Github. Please read the readme.

@LINKeRxUA 2015-12-23 06:51:19

thank you so much. best solution what i have ever seen for multidimensional forms!

@GetFree 2016-08-04 08:55:15

@frontendbeauty, it doesn't return an object literal. That's misunderstanding the concept of a literal. It just returns an object.

@Thomas Cheng 2016-08-11 19:16:38

I have this input: <input name="vehicle[]" value="0"> <input name="vehicle[]" value="1"> <input name="vehicle[]" value="2"> <input name="vehicle[]" value="3"> <input name="vehicle[3]" value="4"> <input name="vehicle[2]" value="5"> <input name="vehicle[]" value="6"> <input name="vehicle[rt]" value="7"> Natively, in PHP I see: "vehicle" => array:6 [▼ 0 => "0" 1 => "1" 2 => "5" 3 => "4" 4 => "6" "rt" => "7" ] Use AJAX and your method, in PHP I see: "vehicle" => array:1 [ "rt" => "7" ] Behavior is not same, specific to PHP?

@Ivan Nosov 2016-06-10 09:03:29

using lodash#set

let serialized = [
  { key: 'data[model][id]', value: 1 },
  { key: 'data[model][name]', value: 'product' },
  { key: 'sid', value: 'dh0un1hr4d' }
];

serialized.reduce(function(res, item) {
  _.set(res, item.key, item.value);
  return res;
}, {});

// returns
{
  "data": {
    "model": {
      "id": 1,
      "name": "product"
    }
  },
  "sid": "dh0un1hr4d"
}

@supertrue 2017-04-10 16:17:43

I like this solution, but it doesn't handle form fields in key[] array format; [ {key: 'items[]', value: 1 }, {key: 'items[]', value: 2 } ] results in { items: { "": 2 } }.

@Justin Levene 2016-05-27 10:31:02

Create a map and cycle all fields, saving their values.

var params = {};
$("#form").find("*[name]").each(function(){
    params[this.getAttribute("name")] = this.value;
});

@ceed 2016-01-01 18:43:08

This function returns all values converted to the right type;

bool/string/(integer/floats) possible

Tho you kinda need jQuery for this, but since serializeArray is jQuery too, so no big deal imho.

/**
 * serialized a form to a json object
 *
 * @usage: $("#myform").jsonSerialize();
 *
 */

(function($) {
    "use strict";
    $.fn.jsonSerialize = function() {
        var json = {};
        var array = $(this).serializeArray();
        $.each(array, function(key, obj) {
            var value = (obj.value == "") ? false : obj.value;
            if(value) {
                // check if we have a number
                var isNum = /^\d+$/.test(value);
                if(isNum) value = parseFloat(value);
                // check if we have a boolean
                var isBool = /^(false|true)+$/.test(value);
                if(isBool) value = (value!=="false");
            }
            json[obj.name] = value;
        });
        return json;
    }
})(jQuery);

@Roey 2015-12-08 09:50:25

the simplest and most accurate way i found for this problem was to use bbq plugin or this one (which is about 0.5K bytes size).

it also works with multi dimensional arrays.

$.fn.serializeObject = function()
{
	return $.deparam(this.serialize());
};

@Alf Eaton 2016-04-19 14:36:25

This does seem to work nicely. There's an alternative repository for jquery-deparam that includes description files for bower and npm.

@barbushin 2012-01-10 17:41:40

I don't know why, but I found only one really working solution for form with inputs with names like name="some[sub][sub][sub][name]".

There is it: LINK

@Max Heiber 2015-07-28 02:18:34

Here's a non-jQuery way:

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

You can use it like this:

function() {

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

        //Make an object out of the form data: {name: value}
        var data = elements.reduce(function(data, element) {
            data[element.name] = element.value;
            return data;
        }, {});

        return data;
    };

    var post = function(action, data, callback) {
        var request = new XMLHttpRequest();
        request.onload = callback;
        request.open('post', action);
        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        request.send(JSON.stringify(data), true);
        request.send();
    };

    var submit = function(e) {
        e.preventDefault();
        var form = e.target;
        var action = form.action;
        var data = getFormData(form);
        //change the third argument in order to do something
        //more intersting with the response than just print it
        post(action, data, console.log.bind(console));
    }

    //change formName below
    document.formName.onsubmit = submit;

})();

@juanpastas 2015-06-13 21:31:23

From some older answer:

$('form input,select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

@dtgq 2016-05-27 01:12:34

From what I can tell, the difference is that your solution does not depend on serializeArray so you have the freedom to choose whatever inputs you want (eg. you can include disabled inputs), right? I.e. this is not coupled to any form or the submit event, it's just independent by itself?

@juanpastas 2016-05-27 15:09:34

the only small difference with linked answer is that there is no data needed to instantiate, reduce returns the object. This is not independent since toArray is from jQuery.

@tfmontague 2015-05-31 07:13:53

If you want to convert a form to a javascript object, then the easiest solution (at this time) is to use jQuery's each and serializeArray function-methods.

$.fn.serializeObject = function() {

  var form = {};
  $.each($(this).serializeArray(), function (i, field) {
    form[field.name] = field.value || "";
  });

  return form;
};

Plugin hosted on GitHub:
https://github.com/tfmontague/form-object/blob/master/README.md

Can be installed with Bower:
bower install git://github.com/tfmontague/form-object.git

@Florin Mircea 2014-10-24 10:21:13

I recently had the same problem so I developed a function that allows parsing a form's controls to obtain control id/value and convert that to JSON.

It is flexible enough to allow adding more controls. You just need to specify the control type and the attribute that you want to interpreted as value.

You can find the full script here.

The advantage is that it only takes the data you actually need, without dragging the whole object.

The dissadvantage is that if you have nested options, you need to prefix the IDs accordingly so you can use a duplicate option to its specific group.

I hope this helps!

@Ethan Brown 2015-03-12 01:23:02

I like using Array.prototype.reduce because it's a one-liner, and it doesn't rely on Underscore.js or the like:

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

This is similar to the answer using Array.prototype.map, but you don't need to clutter up your scope with an additional object variable. One-stop shopping.

IMPORTANT NOTE: Forms with inputs that have duplicate name attributes are valid HTML, and is actually a common approach. Using any of the answers in this thread will be inappropriate in that case (since object keys must be unique).

@gfullam 2015-03-12 14:02:20

This is quite elegant. But it's worth noting that array.prototype.reduce() is not available in IE8 as it is part of the ECMAScript 5 specification. So if you need IE8 support, you'll want to use a polyfill or another solution altogether.

@Ethan Brown 2015-03-12 15:16:33

True, but it's easy enough to polyfill. Also, the IE8 headache is almost over, thanks to Microsoft's great work with IE11 Enterprise Mode -- I no longer cater to individual users with IE8, but when an organization with 10,000 employees that all use IE8 comes along...that's different. Fortunately, Microsoft is working hard on that problem.

@gfullam 2015-03-12 15:18:07

I work for that 10,000 employee organization.

@Ethan Brown 2015-03-12 15:19:53

Well you should have your IT folks look into IE11 Enterprise mode -- it provides a modern browser AND a way to run IE8-compatible apps. Smart move on Microsoft's part: howtogeek.com/184634/…

@Carlos Jimenez Bermudez 2016-08-18 20:56:56

Great answer! Simple and short!

@Harini Sekar 2014-04-07 10:44:48

If you are sending a form with JSON you must remove [] in sending the string. You can do that with the jQuery function serializeObject():

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());

$.fn.serializeObject = function() {
    var o = {};
    //var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name === null || this.name === undefined || this.name === '')
            return;
        var elemValue = null;
        if ($(this).is('select'))
            elemValue = $(this).find('option:selected').val();
        else
            elemValue = this.value;
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(elemValue || '');
        }
        else {
            o[this.name] = elemValue || '';
        }
    });
    return o;
}

@Michael Yagudaev 2014-01-03 00:24:10

There is a plugin to do just that for jQuery, jquery.serializeJSON. I have used it successfully on a few projects now. It works like a charm.

@olleicua 2013-11-12 20:08:05

If you are using Underscore.js you can use the relatively concise:

_.object(_.map($('#myform').serializeArray(), _.values))

@G-Ram 2013-10-11 14:04:58

Using maček's solution, I modified it to work with the way ASP.NET MVC handles their nested/complex objects on the same form. All you have to do is modify the validate piece to this:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

This will match and then correctly map elements with names like:

<input type="text" name="zooName" />

And

<input type="text" name="zooAnimals[0].name" />

@Adrian Seeley 2013-10-06 15:16:51

Use:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

Output:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

@philip oghenerobo balogun 2016-05-25 13:37:40

nice. simple ,short and straight to the point

@Niko 2013-10-06 07:53:38

I wrote a jQuery module, jsForm, that can do this bidirectional even for quite complicated forms (allows collections and other more complex structures as well).

It uses the name of the fields (plus a few special classes for collections) and matches a JSON object. It allows automatic replication of DOM-elements for collections and data handling:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
        <script>
        $(function(){
            // Some JSON data
            var jsonData = {
                name: "TestName",   // Standard inputs
                description: "long Description\nMultiline", // Textarea
                links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}],   // Lists
                active: true,   // Checkbox
                state: "VISIBLE"    // Selects (enums)
            };

            // Initialize the form, prefix is optional and defaults to data
            $("#details").jsForm({
                data:jsonData
            });

            $("#show").click(function() {
                // Show the JSON data
                alert(JSON.stringify($("#details").jsForm("get"), null, " "));
            });
        });
        </script>
    </head>
    <body>
        <h1>Simpel Form Test</h1>
        <div id="details">
            Name: <input name="data.name"/><br/>
            <input type="checkbox" name="data.active"/> active<br/>
            <textarea name="data.description"></textarea><br/>
            <select name="data.state">
                <option value="VISIBLE">visible</option>
                <option value="IMPORTANT">important</option>
                <option value="HIDDEN">hidden</option>
            </select>
            <fieldset>
                <legend>Links</legend>
                <ul class="collection" data-field="data.links">
                    <li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
                </ul>
            </fieldset>
            <button class="add" data-field="data.links">add a link</button><br/>
            Additional field: <input name="data.addedField"/>
        </div>
        <button id="show">Show Object</button>
    </body>
</html>

@Șerban Ghiță 2013-10-03 13:55:51

I coded a form to a multidimensional JavaScript object myself to use it in production. The result is https://github.com/serbanghita/formToObject.js.

@Chris Baker 2013-12-19 17:35:50

I used a variation of this for a very specific implementation, thanks a lot!

@Șerban Ghiță 2013-12-20 08:50:26

Thanks for letting me know that it's useful. I have some incoming features to roll and this motivates me.

@ngr 2013-04-06 20:43:20

Simplicity is best here. I've used a simple string replace with a regular expression, and they worked like a charm thus far. I am not a regular expression expert, but I bet you can even populate very complex objects.

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

@xlthor 2012-12-24 12:06:40

Use this:

var sf = $('#mainForm').serialize(); // URL encoded string
sf = sf.replace(/"/g, '\"');         // Be sure all "s are escaped
sf = '{"' + sf.replace(/&/g, '","'); // Start "object", replace tupel delimiter &
sf = sf.replace(/=/g, '":"') + '"}'; // Replace equal sign, add closing "object"

// Test the "object"
var formdata = eval("(" + sf + ")"); 
console.log(formdata);

It works like a charm, even on very complex forms.

@user633183 2013-02-18 21:58:31

It is risky to eval user input - anything could happen. I strongly recommend to not do this.

@pocesar 2012-12-06 15:09:17

My code from my library phery got a serialization routine that can deal with really complex forms (like in the demo https://github.com/pocesar/phery/blob/master/demo.php#L1664 ), and it's not a one-size-fits-all. It actually checks what the type of each field is. For example, a radio box isn't the same as a range, that isn't the same as keygen, that isn't the same as select multiple. My function covers it all, and you can see it at https://github.com/pocesar/phery/blob/master/phery.js#L1851.

serializeForm:function (opt) {
    opt = $.extend({}, opt);

    if (typeof opt['disabled'] === 'undefined' || opt['disabled'] === null) {
        opt['disabled'] = false;
    }
    if (typeof opt['all'] === 'undefined' || opt['all'] === null) {
        opt['all'] = false;
    }
    if (typeof opt['empty'] === 'undefined' || opt['empty'] === null) {
        opt['empty'] = true;
    }

    var
        $form = $(this),
        result = {},
        formValues =
            $form
                .find('input,textarea,select,keygen')
                .filter(function () {
                    var ret = true;
                    if (!opt['disabled']) {
                        ret = !this.disabled;
                    }
                    return ret && $.trim(this.name);
                })
                .map(function () {
                    var
                        $this = $(this),
                        radios,
                        options,
                        value = null;

                    if ($this.is('[type="radio"]') || $this.is('[type="checkbox"]')) {
                        if ($this.is('[type="radio"]')) {
                            radios = $form.find('[type="radio"][name="' + this.name + '"]');
                            if (radios.filter('[checked]').size()) {
                                value = radios.filter('[checked]').val();
                            }
                        } else if ($this.prop('checked')) {
                            value = $this.is('[value]') ? $this.val() : 1;
                        }
                    } else if ($this.is('select')) {
                        options = $this.find('option').filter(':selected');
                        if ($this.prop('multiple')) {
                            value = options.map(function () {
                                return this.value || this.innerHTML;
                            }).get();
                        } else {
                            value = options.val();
                        }
                    } else {
                        value = $this.val();
                    }

                    return {
                        'name':this.name || null,
                        'value':value
                    };
                }).get();

    if (formValues) {
        var
            i,
            value,
            name,
            $matches,
            len,
            offset,
            j,
            fields;

        for (i = 0; i < formValues.length; i++) {
            name = formValues[i].name;
            value = formValues[i].value;

            if (!opt['all']) {
                if (value === null) {
                    continue;
                }
            } else {
                if (value === null) {
                    value = '';
                }
            }

            if (value === '' && !opt['empty']) {
                continue;
            }

            if (!name) {
                continue;
            }

            $matches = name.split(/\[/);

            len = $matches.length;

            for (j = 1; j < len; j++) {
                $matches[j] = $matches[j].replace(/\]/g, '');
            }

            fields = [];

            for (j = 0; j < len; j++) {
                if ($matches[j] || j < len - 1) {
                    fields.push($matches[j].replace("'", ''));
                }
            }

            if ($matches[len - 1] === '') {
                offset = assign_object(result, fields, [], true, false, false);

                if (value.constructor === Array) {
                    offset[0][offset[1]].concat(value);
                } else {
                    offset[0][offset[1]].push(value);
                }
            } else {
                assign_object(result, fields, value);
            }
        }
    }

    return result;
}

It's part of my library phery, but it can be ported to your own project. It creates arrays where there should be arrays, it gets the correct selected options from the select, normalize checkbox options, etc. If you want to convert it to JSON (a real JSON string), just do JSON.stringify($('form').serializeForm());

@Andrew Barber 2012-12-07 03:03:55

Stack Overflow isn't here for you to promote your library.

@pocesar 2012-12-07 03:12:38

ok but the the serializeForm is part of my library and does exactly what the OP wants

@Alex78191 2017-06-11 20:56:04

The last string is the best

@Onheiron 2012-11-13 18:18:50

I had the same problem lately and came out with this .toJSON jQuery plugin which converts a form into a JSON object with the same structure. This is also expecially useful for dynamically generated forms where you want to let your user add more fields in specific places.

The point is you may actually want to build a form so that it has a structure itself, so let's say you want to make a form where the user inserts his favourite places in town: you can imagine this form to represent a <places>...</places> XML element containing a list of places the user likes thus a list of <place>...</place> elements each one containing for example a <name>...</name> element, a <type>...</type> element and then a list of <activity>...</activity> elements to represent the activities you can perform in such a place. So your XML structure would be like this:

<places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

How cool would it be to have a JSON object out of this which would represent this exact structure so you'll be able to either:

  • Store this object as it is in any CouchDB-like database
  • Read it from your $_POST[] server side and retrive a correctly nested array you can then semantically manipulate
  • Use some server-side script to convert it into a well-formed XML file (even if you don't know its exact structure a-priori)
  • Just somehow use it as it is in any Node.js-like server script

OK, so now we need to think how a form can represent an XML file.

Of course the <form> tag is the root, but then we have that <place> element which is a container and not a data element itself, so we cannot use an input tag for it.

Here's where the <fieldset> tag comes in handy! We'll use <fieldset> tags to represent all container elements in our form/XML representation and so getting to a result like this:

<form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

As you can see in this form, we're breaking the rule of unique names, but this is OK because they'll be converted into an array of element thus they'll be referenced only by their index inside the array.

At this point you can see how there's no name="array[]" like name inside the form and everything is pretty, simple and semantic.

Now we want this form to be converted into a JSON object which will look like this:

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

To do this I have developed this jQuery plugin here which someone helped optimizing in this Code Review thread and looks like this:

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

I also made this one blog post to explain this more.

This converts everything in a form to JSON (even radio and check boxes) and all you'll have left to do is call

$.post('script.php',('form').toJSO(), ...);

I know there's plenty of ways to convert forms into JSON objects and sure .serialize() and .serializeArray() work great in most cases and are mostly intended to be used, but I think this whole idea of writing a form as an XML structure with meaningful names and converting it into a well-formed JSON object is worth the try, also the fact you can add same-name input tags without worrying is very useful if you need to retrive dynamically generated forms data.

I hope this helps someone!

@andrewmart.in 2013-08-28 22:34:31

This didn't seem to work for me.

@Onheiron 2013-09-02 10:23:13

what are you trying to do?

@Kipras 2012-09-18 15:26:33

This is an improvement for Tobias Cohen's function, which works well with multidimensional arrays:

http://jsfiddle.net/BNnwF/2/

However, this is not a jQuery plugin, but it will only take a few seconds to make it into one if you wish to use it that way: simply replace the function declaration wrapper:

function serializeFormObject(form)
{
    ...
}

with:

$.fn.serializeFormObject = function()
{
    var form = this;
    ...
};

I guess it is similar to macek's solution in that it does the same thing, but i think this is a bit cleaner and simpler. I also included macek's test case inputs into the fiddle and added some additional ones. So far this works well for me.

function serializeFormObject(form)
{
    function trim(str)
    {
        return str.replace(/^\s+|\s+$/g,"");
    }

    var o = {};
    var a = $(form).serializeArray();
    $.each(a, function() {
        var nameParts = this.name.split('[');
        if (nameParts.length == 1) {
            // New value is not an array - so we simply add the new
            // value to the result object
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        }
        else {
            // New value is an array - we need to merge it into the
            // existing result object
            $.each(nameParts, function (index) {
                nameParts[index] = this.replace(/\]$/, '');
            });

            // This $.each merges the new value in, part by part
            var arrItem = this;
            var temp = o;
            $.each(nameParts, function (index) {
                var next;
                var nextNamePart;
                if (index >= nameParts.length - 1)
                    next = arrItem.value || '';
                else {
                    nextNamePart = nameParts[index + 1];
                    if (trim(this) != '' && temp[this] !== undefined)
                        next = temp[this];
                    else {
                        if (trim(nextNamePart) == '')
                            next = [];
                        else
                            next = {};
                    }
                }

                if (trim(this) == '') {
                    temp.push(next);
                } else
                    temp[this] = next;

                temp = next;
            });
        }
    });
    return o;
}

Related Questions

Sponsored Content

41 Answered Questions

[SOLVED] How do I test for an empty JavaScript object?

  • 2009-03-25 01:39:45
  • falmp
  • 1188591 View
  • 1706 Score
  • 41 Answer
  • Tags:   javascript json

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

37 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 652508 View
  • 2248 Score
  • 37 Answer
  • Tags:   javascript jquery

56 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

37 Answered Questions

[SOLVED] How do I format a Microsoft JSON date?

38 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

24 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 1877321 View
  • 1779 Score
  • 24 Answer
  • Tags:   javascript jquery

31 Answered Questions

[SOLVED] Add table row in jQuery

11 Answered Questions

[SOLVED] Serializing to JSON in jQuery

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

Sponsored Content