Monday, March 9, 2009

Navigation using the Select tag

By using the form select tag the user can easily navigate from one page to another page. The "windiow.location.href" is used to move the user from one page to the another page. The below code makes it so simple.

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function changePage(newLoc)
{

nextPage = newLoc.options[newLoc.selectedIndex].value;

if (nextPage != "")
{
document.location.href = nextPage
}
}
</script>
</head>
<body>
<center>
<form method="POST" name="menu" >
<select name="selectedPage" onChange="changePage(this.form.selectedPage)">
<option value = "" selected> select </option>
<option value = "/test.html"> Goto test page </option>
<option value = "/home.html"> Goto home page </option>
<option value = "/welcome.html"> Goto welcome page </option>
<option value = "/index.html"> Goto index page </option>
</select>
</form>
</center>
</body>
</html>


Here as per the selected the option value the URL will be refreshed and the particular page is displayed.

1 comment:

  1. Thanks for a fast and easy example. I got more done in five minutes with THIS than an hour in other posts I came across

    ReplyDelete