May 18, 2010

Looking for a jquery plugin to serialize a form to an object

Question by John

I’m looking for a jQuery function or plugin that serializes form inputs to an object using the naming convention for deep-serialization supported by param() in jQuery 1.4:

<form>
  <input name="a[b]" value="1"/>
  <input name="a[c]" value="2"/>
  <input name="d[]" value="3"/>
  <input name="d[]" value="4"/>
  <input name="d[2][e]" value="5"/>
</form>

$('form').serializeObject(); // { a: { b:"1",c:"2" }, d: ["3","4",{ e:"5" }] }

Prototype’s Form.serialize method can do exactly this. What’s the jQuery equivalent? I found this plugin but it doesn’t follow this naming convention.

Answer by John

Since there didn’t seem to be any existing libraries that accomplished what I was seeking, I mashed up bits from a couple of existing libraries that did similar things:

  • The jQuery.deparam function from jQuery BBQ
  • The jQuery.serializeObject function mentioned in the question.

Both are by Ben Alman. Thanks, Ben!

The result: http://gist.github.com/405448

Answer by Starx

try using jquery form plugin. I haven’t tested it, but I think it will fix your problem

http://jquery.malsup.com/form/

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!