Assignment019

If-Else If-Else Navigation

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:

JavaScript Navigation
Where do you want to go?


When using JavaScript code with forms, make sure to name the form. As always, forms should start with the </p> <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>
Button

< 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">

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>