...

View Full Version : How to recognize a browser back click or refresh with JavaScript



redshift83
03-21-2005, 10:58 PM
The initial load works fine. But if you select something to search on and then hit your back browser button it won’t load the form with the correct “selected” option in the drop down. The same problem occurs when you use the refresh button on your browser.

Basicly after the page is loaded I want it to run my function with the selected option but it doesnt seem to be working.

I’m trying to implement something like:
onLoad="serachType(document.form.search.options[selectedIndex].value);"

It might be best to copy the code into a html file and run it localy so you get a better idea of what I'm asking. I was going to post the html page but my I dont have access to the ftp site atm.

PS: After reading these forums for awhile I have noticed that it would have been better to use display:none vs visibility:hidden. That way I wouldn't have had to position everything :)



<html>
<head>
<SCRIPT language="JavaScript">
function serachType(type) {
switch (type) {
case "number":
whaNum.style.visibility='visible';
forDist.style.visibility='hidden';
wlap.style.visibility='hidden';
specName.style.visibility='hidden';
submit.style.visibility='visible';

document.form.select.disabled=false;
document.form.number.disabled=false;
document.form.forest.disabled=true;
document.form.wlap.disabled=true;
document.form.species.disabled=true;
document.form.speciesname[0].disabled=true;
document.form.speciesname[1].disabled=true;

break;
case "forest_region":
whaNum.style.visibility='hidden';
forDist.style.visibility='visible';
wlap.style.visibility='hidden';
specName.style.visibility='hidden';
submit.style.visibility='visible';

document.form.select.disabled=true;
document.form.number.disabled=true;
document.form.forest.disabled=false;
document.form.wlap.disabled=true;
document.form.species.disabled=true;
document.form.speciesname[0].disabled=true;
document.form.speciesname[1].disabled=true;
break;
case "wlap_region":
whaNum.style.visibility='hidden';
forDist.style.visibility='hidden';
wlap.style.visibility='visible';
specName.style.visibility='hidden';
submit.style.visibility='visible';

document.form.select.disabled=true;
document.form.number.disabled=true;
document.form.forest.disabled=true;
document.form.wlap.disabled=false;
document.form.species.disabled=true;
document.form.speciesname[0].disabled=true;
document.form.speciesname[1].disabled=true;
break;
case "species":
whaNum.style.visibility='hidden';
forDist.style.visibility='hidden';
wlap.style.visibility='hidden';
specName.style.visibility='visible';
submit.style.visibility='visible';

document.form.select.disabled=true;
document.form.number.disabled=true;
document.form.forest.disabled=true;
document.form.wlap.disabled=true;
document.form.species.disabled=false;
document.form.speciesname[0].disabled=false;
document.form.speciesname[1].disabled=false;
break;
case "none":
whaNum.style.visibility='hidden';
forDist.style.visibility='hidden';
wlap.style.visibility='hidden';
specName.style.visibility='hidden';
submit.style.visibility='hidden';

document.form.select.disabled=true;
document.form.number.disabled=true;
document.form.forest.disabled=true;
document.form.wlap.disabled=true;
document.form.species.disabled=true;
document.form.speciesname[0].disabled=true;
document.form.speciesname[1].disabled=true;
break;
}
}
</SCRIPT>
<title>asdf</title>
</head>

<BODY>
The initial load works fine. But if you select something to search on and then hit your back browser button it won’t load the form with the correct “selected” option in the drop down. The same problem occurs when you use the refresh button on your browser.<BR><BR>

I’m trying to implement something like:<br>
onLoad="serachType(document.form.search.options[selectedIndex].value);"

<FORM action='http://www.asdf.com' method=GET name="form" id="form">
<SELECT name="search" id="search" onChange="serachType(options[selectedIndex].value);" STYLE="position:absolute;top:170;">
<OPTION value="none" selected>--Select Search--</OPTION>
<OPTION value="number">WHA Number</OPTION>
<OPTION value="forest_region">Forest District</OPTION>
<OPTION value="wlap_region">WLAP Region</OPTION>
<OPTION value="species">Species Name</OPTION>
</SELECT>

<DIV ID="whaNum" style="visibility:hidden; style=display:inline" >
<SELECT name="select" STYLE="position:absolute;top:170;left:145">
<OPTION value="1" selected>1
<OPTION value="2">2
<OPTION value="3">3
<OPTION value="4">4
<OPTION value="5">5
<OPTION value="6">6
<OPTION value="7">7
<OPTION value="8">8
<OPTION value="9">9
</SELECT>
<INPUT name=number type=text id="number" size=3 maxlength="3" STYLE="position:absolute;top:170;left:185">
</DIV>

<DIV ID="forDist" style="visibility:hidden; style=display:inline">
<SELECT name="forest" id="forest" STYLE="position:absolute;top:170;left:145">
<OPTION value="100 Mile House">100 Mile House</OPTION>
<OPTION value="Arrow Boundary">Arrow Boundary</OPTION>
<OPTION value="Campbell River">Campbell River</OPTION>
<OPTION value="Cascades">Cascades</OPTION>
<OPTION value="Central Cariboo">Central Cariboo</OPTION>
<OPTION value="Chilcotin">Chilcotin</OPTION>
<OPTION value="Chilliwack">Chilliwack</OPTION>
<OPTION value="Columbia">Columbia</OPTION>
<OPTION value="Fort Nelson">Fort Nelson</OPTION>
<OPTION value="Fort St. James">Fort St. James</OPTION>
<OPTION value="Headwaters">Headwaters</OPTION>
<OPTION value="Kalum">Kalum</OPTION>
<OPTION value="Kamloops">Kamloops</OPTION>
<OPTION value="Kootenay Lake">Kootenay Lake</OPTION>
<OPTION value="Mackenzie">Mackenzie</OPTION>
<OPTION value="Nadina">Nadina</OPTION>
<OPTION value="North Coast">North Coast</OPTION>
<OPTION value="North Island - Central Coast">North Island - Central Coast</OPTION>
<OPTION value="Okanagan Shuswap">Okanagan Shuswap</OPTION>
<OPTION value="Peace">Peace</OPTION>
<OPTION value="Prince George">Prince George</OPTION>
<OPTION value="Queen Charlotte">Queen Charlotte</OPTION>
<OPTION value="Quesnel">Quesnel</OPTION>
<OPTION value="Rocky Mountain">Rocky Mountain</OPTION>
<OPTION value="Skeena Stikine">Skeena Stikine</OPTION>
<OPTION value="South Island">South Island</OPTION>
<OPTION value="Squamish">Squamish</OPTION>
<OPTION value="Sunshine Coast">Sunshine Coast</OPTION>
<OPTION value="Vanderhoof">Vanderhoof</OPTION>
</SELECT>
</DIV>

<DIV ID="wlap" style="visibility:hidden; style=display:inline">
<SELECT name="wlap" id="wlap" STYLE="position:absolute;top:170;left:145">
<OPTION value="Cariboo" selected>Cariboo
<OPTION value="Kootenay">Kootenay
<OPTION value="Lower Mainland">Lower Mainland
<OPTION value="Okanagan">Okanagan
<OPTION value="Omineca">Omineca
<OPTION value="Peace">Peace
<OPTION value="Skeena">Skeena
<OPTION value="Thompson">Thompson
<OPTION value="Vancouver Island">Vancouver Island
</SELECT>
</DIV>

<DIV ID="specName" style="visibility:hidden; style=display:inline">
<INPUT name="species" type="text" id="species" size="30" STYLE="position:absolute;top:170px;left:145px">
<INPUT name="speciesname" type="radio" value="english" STYLE="position:absolute;top:170;left:350" checked>
<INPUT name="speciesname" type="radio" value="scientific" STYLE="position:absolute;top:170;left:425">
<DIV STYLE="position:absolute;top:170px;left:368px"><em>English</em></DIV>
<DIV STYLE="position:absolute;top:170px;left:443px"><em>Scientific</em></DIV>
</DIV>

<DIV ID="submit" style="visibility:hidden;position:absolute;top:200;">
<INPUT name="submit" type=submit id="search2" value=Search>
</DIV>
<script>onLoad="serachType(document.form.search.options[selectedIndex].value);"</script>
</FORM>
</body>
</html>

Harry Armadillo
03-21-2005, 11:59 PM
Try: <BODY onLoad="serachType(document.forms.form.search.value);">

serach ? :)

If you don't have Firefox, get a copy. It's DOM inspector is invaluable for figuring out exactly how to access a given element.

redshift83
03-22-2005, 04:38 PM
Wow that works perfectly! Thanks a ton!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum