I wouldn't count of all browsers to fill in the hidden inputs when the
user clicks the back button. In your place, I'd seriously consider
switching the form submission to AJAX. If you still want the user to
be able to go back with a back button, you could use deeplinking.
2009/8/17 north <ollo...@web.de>:
>
> I have to add that my colleague who coded the old version of this page
> used Sajax and "vanilla" JS, and his page works in all tested
> browsers. So I thought doing the same with jQuery should be as easy as
> it gets... :)
>
> On 17 Aug., 19:22, north <ollo...@web.de> wrote:
>> 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
