Code Snippet

Home » Code Snippets » jQuery » Serialize Form to JSON

Serialize Form to JSON

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

Subscribe to The Thread

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

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

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

  2. 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?

  3. I’m still not quite understand.

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

  5. jeremy

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

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

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~