treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Serialize Form to JSON

Last updated on:

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

Reference URL

View Comments

Comments

  1. Permalink to comment#

    This is not at all ‘javascript’. This is a jQuery snippet.

    • GURU
      Permalink to comment#

      This is Javascript, as jQuery is a framework using Javascript as the language!

      Fool’s like you shouldn’t be allowed to post comments!

    • Yann
      Permalink to comment#

      Waoww, thanks Luca for the very usefull comment.
      By the way, as you seem very keen to point out not relevant details
      then you should write JavaScript correctly.

      Tghe snippet above will not handle nested form objects correctly,
      the follwing jQuery would work it out better:

      (function(jQuery){

      jQuery.fn.MytoJson = function(options) {
      
          options = jQuery.extend({}, options);
      
          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]++;
          };
      
          jQuery.each(jQuery(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 = jQuery.extend(true, json, merge);
          });
      
      
          return json;
      }
      

      })(jQuery);

  2. Moved.

  3. Craig
    Permalink to comment#

    I’m very new to JQuery, and this is probably a silly request, but could you provide an example of usage? Is it something like $("#myForm").serializeObject?

  4. Permalink to comment#

    I’m still not quite understand.

  5. Hi, im using a flash gallery, and i have to implement it into a web for a new customer.

    The gallery generates a JSON file as follows:
    {"gallery":{"items":[{"description":"","link":"","thumb":"gallery/images/t2.jpg","target":"","source":"gallery/images/1.jpg"},
    {"description":"","link":"","thumb":"gallery/images/t2.jpg","target":"","source":"gallery/images/2.jpg"},
    {"description":"","link":"","thumb":"gallery/images/t3.jpg","target":"","source":"gallery/images/3.jpg"},
    {"description":"","link":"","thumb":"gallery/images/t4.jpg","target":"","source":"gallery/images/4.jpg"},
    {"description":"","link":"","thumb":"gallery/images/t5.jpg","target":"","source":"gallery/images/5.jpg"}],
    "settings":{"background":{"bgColor":16777215,"transparentBG":true},"image":{"scaleMode":"fill","cornerRadius":10,"transitionDuration":1,"align":"center","transitionEffect":"fit","useShadow":true},"caption":{"position":"bottom","bgColor":0,"color":16777215,"visibleMode":"onRollOver","bgAlpha":30,"fontName":"Arial","fontSize":11},"preview":{"usePreview":true,"alpha":100,"outlineColor":0,"height":100,"cornerRadius":10,"width":200,"useShadow":true},"slideshow":{"start":false,"delay":2.5,"loop":true,"stopAutoOnClick":true},"dimensions":{"height":385,"width":470},"thumbBar":{"scrollSpeed":10,"position":"bottom","useThumbBar":true},"preloader":{"alpha":80,"usePreloader":true},"thumbnail":{"cornerRadius":0,"useShadow":true,"outlineColor":3355443,"outlineColorOnRollOver":6710886,"height":45,"alpha":70,"width":60,"outlineColorOnClick":10066329},"buttons":{"position":"right","fullScreenButton":true,"navigationButtons":true,"slideshowButton":true}}},"galleryName":"Art Gallery"}

    Can anyone show me the code to insert values from a form in html??

    Thanks in advance

  6. jeremy
    Permalink to comment#

    @Ignacio – You’ll need to loop through the json object created from this function and just create another variable that you copy items too.

  7. Dema
    Permalink to comment#

    HI everyone,
    I would like to know if there is in jquery a form reservation for input and output date, I would like to find some tuto .
    I want to use for booking rooms

    thanks a lot

  8. Permalink to comment#

    This snippet useful until now.

  9. Marcio
    Permalink to comment#

    My result when a do alert it repeat de values in each json itens

  10. MarioMC

    Dude, thank you for this. I started here, then got sidetracked by some of the links in the comments, and after a roundabout trip all across the internet found my way back, to this, the only actual working solution.

    Thanks so much, appreciate it!

  11. Doesn’t appear to work on fields named for instance start[125]

    I get back

    {
    "start[125]":""
    }

    rather than the desired

    {
    "start":{"125":""}
    }
  12. Posni
    Permalink to comment#

    This seems to be copied (judging from dates) from Stackoverflow: http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery

    • DMC
      Permalink to comment#

      I think you’re missing the point of sharing snippets of code…

Leave a Comment

Use markdown or basic HTML and be nice.