Serializing form inputs with jquery

Question

I have a form with many hidden divs and a select for showing a single div.

But when submitting the data to the server, all data is sended and some values are lost (fields with the same name in different divs).

This is a scenario example:

<form>
  <select>
    <option value="ga">GA</option>
    <option value="om">OM</option>
  </select>

  <div class="ga">
   <input type="text" name="a_field" />
   <input type="text" name="a_field_2" />
   ...code
  </div>

  <div class="om">
   <input type="text" name="a_field_2" />
   <input type="text" name="a_field_100" />
   ...code
  </div>

</form>

How can I do for only serialize the div I want?

My first approach was remove the hidden divs in the beforeSerialize method from ajaxForm, but now I need to serialize the values when clicking another links to make another calls (and not to submitting the form).

Thanks in advance

Why are your fields the same name? jQuery is just dumping a key-value pair in an object and passing that object as parameters. Try renaming your fields, or working on making elements with the same name in to an array instead. (facsimile of <input name="foo[]" /><input name="foo[]" /> — Brad Christie
– Brad Christie, Commented Aug 30, 2011 at 12:55
I've solved it detaching the divs, saving it in an array, and renderizing when needed. But thanks, Brad and MaXo :) — pablorc
– pablorc, Commented Sep 20, 2011 at 15:29

Dan · Accepted Answer · 2012-08-02 14:52:36Z

1

you can do it manually:

var serial = new Array();
var i = 0;
$('.om input').each( function(){
    serial[i++] = $(this).attr('name')[0]+'='+$(this).html()[0];
});
serial.join('&');

edited Aug 2, 2012 at 14:52

Dan

3,3971 gold badge35 silver badges52 bronze badges

answered Aug 30, 2011 at 13:02

MaXo

813 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

Your solution will tack on an extra & at the end. I've corrected.

Collectives™ on Stack Overflow

Serializing form inputs with jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related