Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to recognize a browser back click or refresh with JavaScript

    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

    Code:
    <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>

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow that works perfectly! Thanks a ton!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •