Forms can be used with JavaScript to ease Web site navigation. The user selects a location from a drop-down box and clicks the "Go!" button to jump to the desired location. The 'Go!' button runs a function that is coded in the head of the Web page.
Here's an example of JavaScript/ form navigation:
When using JavaScript code with forms, make sure to name the form. As always, forms should start with the <form> tag and end with the </form> tag. The method and action attributes are not required for this assignment. In this example, the button will call a function, which runs JavaScript code. Make sure to include all your HTML controls between the form tags!
<form name="pageform">
</form>
The name of the form is 'pageform.'
The name of the drop-down box is 'pageselect.'
The name of the button is 'gobutton.'
Here's the code for the form controls (place the code between your form tags):
Drop-Down Box <select name="pageselect" size="1" id="pageselect" >
<option value="0" selected="selected" >Yahoo</option>
<option value="1">Google</option>
<option value="2">MSN</option>
<option value="3">Chagoyan</option>
</select>
< input name="gobutton" type="button" value="Go!" onClick="jumper(window.document.pageform.pageselect.value)">
Here's the code used to create the function in the head section of the Web page: <script language="Javascript" type="text/javascript">
//create function that will be called by the 'Go!' button
function jumper(picked)
{
if (picked == 0)
{
window.location = "http://www.yahoo.com/";
}
else if (picked == 1)
{
window.location = "http://www.google.com/";
}
else if (picked == 2)
{
window.location = "http://www.msn.com/";
}
else if (picked == 3)
{
window.location = "http://www.chagoyan.com/";
}
}
</script>