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);
}
});
});