Forum Moderators: open
* I am on page 1 and I select an option in the drop down menu and am taken to page 2;
* I press back browser button to return to previous page (page 1) however, on return to the previous page (page 1) the option selected still shows page 2, as opposed to reverting back to page 1. The select <option> only changes when the browser is pressed a second time, but by this time there is a 1 <option> delay increment.
For example:
1. The user is on the Dresses page and selects Tops from the drop down menu and is taken to the page containing all the tops.
2. The user then selects the Skirts option, from the drop down menu, and is taken to the skirts page.
3. The user then uses the back browser to go back (-1) to the Tops page however, on return to the Tops page the select drop down menu still reads "Skirts" as opposed to "Tops."
4. When the user presses the back browser button for the second time, the user is correctly taken back to the very first page selected(Dresses), but due to the delay increment of -1 the drop down menu now shows "Tops" instead of "Dresses". Thus the page selected does not correspond to the <option> select on the drop down menu.
Is there any way to prevent this delay increment of 1 as the only other option I have is to disable the back browser all together which I really do not want to do.
I have tried using <body onload="document.formName.reset();"> but this only works on IE and google chrome. Also tried using <body onload="document.formName.selectID.selectedIndex=integer;"> But this does not work in Firefox and Safari
Any tips would be useful.
Many thanks in advance.
Welcome to the forum.
There are several ways [developer.mozilla.org] to prevent this, including setting an unload event handler.
Many thanks for responding to my query so quickly, as I am a beginner to this whole javascript world, and that problem was doing my nut, lol!
Fotiman, I read the link you sent me regarding event handlers which was very, very useful, as I did not realise that firefox used in-memory caching. Thank you! In light of this would including cache-control:no-cache in the <meta> tag
prevent page caching? Or would I be better of utilising the unload event?
Dave, please find code I am using, as requested:
Example (1)
<script type="text/javascript"><!--
function functionblack_dress(){window.location=document.getElementById("dresses").value;}
function functiondrop_menu(){window.location=document.getElementById("menu").value;}
//--></script>
</head>
<body onload="document.alltrousers.dresses.selectedIndex=3;">
<div class="drop_menu">
<p>Sort by Style</p>
<form name="alltrousers">
<select id="dresses" onchange="functionblack_dress()">
<option value="wide_leg.html">Wide-Leg</option>
<option value="straight_leg.html">straight-Leg</option>
<option value="skinny.html">Skinny</option>
<option value="trousers_all.html">View All</option>
<option value="trousers.html" selected="yes">Select Option</option>
</select>
</form>
</div>
Example (2)
<script type="text/javascript"><!--
function functionblack_dress(){window.location=document.getElementById("dresses").value;}
function functiondrop_menu(){window.location=document.getElementById("menu").value;}
//--></script>
<div class="drop_menu">
<p>Sort by Style</p>
<form name="alltrousers">
<select id="dresses" onchange="functionblack_dress()">
<option value="wide_leg.html">Wide-Leg</option>
<option value="straight_leg.html">straight-Leg</option>
<option value="skinny.html">Skinny</option>
<option value="trousers_all.html">View All</option>
<option value="trousers.html" selected="yes">Select Option</option>
</select>
</form>
</div>
Thanks again fellas for all your help, much appreciated.
Nonye
I forgot to include <body onload="document.alltrouser.reset();"> in the body tag for example 2.
Thank you.
function functionblack_dress(el,selected){
var to=el.value;
el.selectedIndex=selected;
window.location=to;
}
<select id="dresses" onchange="functionblack_dress(this,4)">
<option value="wide_leg.html">Wide-Leg</option>
<option value="straight_leg.html">straight-Leg</option>
<option value="skinny.html">Skinny</option>
<option value="trousers_all.html">View All</option>
<option value="trousers.html" selected="yes">Select Option</option>
</select>
If you scroll down on that page there's a tutorial index
