[jQuery] Saving the state of an ajax form
Hi,
I have a page with a simple form: 3 hidden fields and 3 selects.
I load the data for the first select via Ajax on domready. I have
"change" event handlers for all 3 fields. If I select something in the
first select, the corresponding data gets loaded into the second
select via Ajax etc. So it's a "cascade" of selects.
When an option in the 3rd select is being selected, I save the values
of all 3 selected options in the hidden fields, and create a button
for submitting the form.
Until here everything works fine.
When a users hits the submit button, he is being forwarded to a
results page. Now, when the user hits the back button, and the page
with the form gets loaded again, I check if the first hidden field has
a value.
If so, I try to fill all the form fields with the values the user had
entered (i.e. the selections he made), which means I make 3 Ajax calls
(to have all the data available), and mark the options the user had
selected as selected.
That works fine in FF 3 and 3.5, Safari 4, as well as IE 7 right now.
IE 6 only display the data of the first select (as if the other two
Ajax calls aren't successful or something - no errors though), while
Opera 9 doesn't seem to remember the values of the 3 hidden fields
(same issue with IE 8, but I'm using IE Tester, which is not always
reliable).
The html and jquery code (leaving out all the details) look like this:
<form id="myform" action="action.php" method="get">
<input name="manu_saved" id="manu_saved" type="hidden" />
<input name="series_saved" id="series_saved" type="hidden" />
<input name="type_saved" id="type_saved" type="hidden" />
<select id="manu" name="manu">
</select>
<select id="model" name="model"disabled="disabled">
<option value="empty">Choose</option>
</select>
<select id="type" name="type"disabled="disabled">
<option value="empty">Choose</option>
</select>
</form>
if (//hidden field has value) {
$.ajax({ //load data into the first field and mark the option which
got selected by the user as selected (using the value from the hidden
field)
}
});
$.ajax({ //load data into the second field and mark the option which
got selected by the user as selected (using the value from the hidden
field)
});
$.ajax({ //load data into the third field and mark the option which
got selected by the user as selected (using the value from the hidden
field)
});
}
else { //hidden field has no value
$.ajax({ //load data into the first field
});
}
$select2.change(function(){ //load data into select 2
});
$select2.change(function(){ //load data into select 3
});
$select3.change(function(){ // create hidden fields and submit button
});
Any help is highly appreciated.
Thanks