Site Navigation

4. Javascript Only

If the server hosting your site doesn't support server side scripts then you can use Javascript to run the navigation. Unfortunately if you do this then anyone without Javascript will be unable to use the navigation and so you will need to provide an alternate method for those visitors to access your pages.

Here is the code for our example drop down modified to use Javascript only navigation:

<form name="ex2" method="POST">
<div align="center">
<select name="xfer" size="1">
<option value="bltime1.htm">Introduction</option>
<option value="bltime2.htm">Get the Script</option>
<option value="bltime3.htm">Configure the Script</option>
<option value="bltime4.htm">Daylight Saving</option>
</select>
<input type="button"
onclick="location = ''+document.ex2.xfer.options[document.ex2.xfer.selectedIndex].value;"
value="Go!" />
</div></form>

Note that it is two apostrophes following the location= and not a quote.

You will also note that the onclick statement contains several references to the names that we gave to the form and the selection box. document.ex2 is the name that we need to use to refer to this specific form. document.ex2.xfer refers to the selection box within this form. In this instance we have given the selection box a different name in this form to the name that we gave the selection box in the first form but had we given them both the same name we could still have distinguished between then because the forms that they are in have different names.

document.ex2.xfer.selectedIndex is the numerical value corresponding to the entry within the drop down box that was selected and so document.ex2.xfer.options[document.ex2.xfer.selectedIndex] is the way that we can refer to the selected entry within the drop down box. In this instance we want the value of that selected entry to be assigned to location. Assigning a new value to the location field is the method used to transfer to the selected page using javascript code.

With a Javascript solution we can do away with the need for the GO button. We'll look at No Button Navigation next.

Note that the script and the descriptions of the functions that it contains are rewritten from the "Ask Felgall" website with the permission of the copyright owner.