Forum Moderators: open

Message Too Old, No Replies

javascript modifying form select options - problems when going 'back'

         

jamesjames

1:57 am on Apr 3, 2006 (gmt 0)

10+ Year Member



Hi,
I have a search form on a site where users can make choices in select elements which affect the choices shown in more refined questions.

Eg: 'select county' result will modify the contents of a selection called 'select region' to only show regions in a particular country.

This is all working fine in IE and firefox. When I submit the data on firefox, I can press back and the dropdowns will have the same contents as when the page was submitted.
However when I submit it on IE and then go back, the select items will have the same selectedIndex that was used when the data was submitted - however the actual contents of these elements will be as they were when the page was first loaded!
Anyone experiences this in the past, and found a way round it?

note: this is not a cache issue, as if I make a standard select element, the selected item in this will still be selected when I submit the form and then go back.

Any help much appreciated.

ChadSEO

7:35 pm on Apr 4, 2006 (gmt 0)

10+ Year Member



jamesjames,

Welcome to WebmasterWorld!

Firefox is definitely better at remembering page state when going forward and back. I assume you have some sort of javascript function which populates the second drop-down list? If you add something like this to the body tag, it should fix the problem in IE:

<body onload="populateRegions();">

That way when you go back in IE, it will run that function, and should show the appropriate regions. Hopefully that points you in the right direction, let me know if you have any questions.

Chad

jamesjames

10:28 pm on Apr 6, 2006 (gmt 0)

10+ Year Member



hi Chad,
thanks for the reply.
I probably should have included an example in my original post.

Say I have a select element with the options A, B, C.
a javascript function is triggered by the user changing another option which replaces these with the options D, E, F.
If the user selects E, submits the form, and then goes back, the select element will now contain A, B and C again with B selected. If they had submitted it with F selected, it would have C selected when they go back. So IE seems to be repopulating it with the original form elements, but setting the current value to whatever the selectedIndex was when submitted. Make more sense now?

I have got round this in a very un-elegant way by having the select element be initally populated with all possible options. When the page is loaded, a javascript function re-populates it to show the options that should be available by default. When it's submitted in IE, another javascript function re-populates it again with all possible elements, and sets the value back to what was selected by the user.
When the user clicks back in IE, it will again contain all possible elements however the correct one will be selected, and another javascript function looks at the value of this to see what options should be available (and repopulates it again with only the relevent options showing).

This is a very roundabout way of getting it done, however after much hair pulling it's the only way I've been able to get it working.
The select elements are just basic region/county/town selections if that makes it any easier to imagine what I'm trying to do. So the user selects a region, it shows all counties/towns in that region. They select a county, it shows all towns in that county.