Serialize unique form from page of many for AJAX. Works in FF/Safari, but IE serializes ALL forms on page

I have a page of similar items, each in their own form I want to update using Ajax. For each item, I append a counter onto the end of the form id, so each form has a unique id. I also store this "counter id" as an attribute in the submit element, so I can dynamically build the form name in JQuery.

It works perfectly in FF win/mac and Safari mac. Serialize obtains only the data from the unique form.

But all versions of IE seem to puke on it...

  • For the first form on the page, serialize gets all data from every form on the page
  • And for the rest of the forms on the page, serialize returns nothing

How do I get IE to serialize the proper form, and only that form?

After 3 hours searching google and stackoverflow, I am dead stuck. Heres a snippet of how the html forms look:

<form id='ajax_multi_form0' action="http://tims-mac-pro.local:8888/configuration/store/node_update" method="post"> <input type="hidden" name="id" value="1" /> ... <input type="text" size='4'name="temperature_below_alert" value='5' /></td> <input type="text" size='4' name="temperature_above_alert" value='26' /></td> <input counter='0' class='ajax_multi_submit' type='submit' name="submit" value="Update This Node" </form> <form id='ajax_multi_form1' action="http://tims-mac-pro.local:8888/configuration/store/node_update" method="post"> <input type="hidden" name="id" value="2" /> <input type="text" size='4'name="temperature_below_alert" value='-10' /></td> <input type="text" size='4' name="temperature_above_alert" value='7' /></td> ... <input counter='1' class='ajax_multi_submit' type='submit' name="submit" value="Update This Node" </form>

And here is the JQuery

$('.ajax_multi_submit').click(function(event){ event.preventDefault(); // get the counter assigned to this form. var element = $(this); var counter = element.attr("counter"); var formUrl = $('#ajax_multi_form'+counter).attr('action'); $.ajax({ url: formUrl, type: "POST", dataType: "html", data: $('#ajax_multi_form'+counter).serialize(), beforeSend: function(){ showAjaxMultiBusy(counter); }, complete: function(){ }, success: function(html){ processAjaxMultiForm(html, counter); } }); });

-------------Problems Reply------------

You're missing the closing angle bracket on the submit buttons, causing it to misinterpret the closing subsequent closing form tag.

Able to reproduce in IE, and adding the ">" onto the end of those submit buttons made the problem go away...

Category:jquery Views:1 Time:2009-08-17

Related post

Copyright (C), All Rights Reserved.

processed in 0.143 (s). 11 q(s)