JavaScript and Forms

The 'Form' tag is usually used to create forms for sending to CGI scripts or other server-based software, but there is much we can do at the browser end as well with JavaScript:

A drop-down menu using JavaScript and 'Form'
The following code will help you create a drop-down menu with links.

First, make an array containing the URL's of all the pages in your drop-down menu. An array is just a list of objects (in this case, URLs). To make this easier, write a function to build the array:

function buildArray()
{
var a = buildArray.arguments;
for (i=0; i<a.length; i++)
{
this[i] = a[i];
}
this.length = a.length;

Then we call that function, passing it the URLs we want in the array:

var urls1 = new buildArray("",
"about.html",
"new.html",
"portfolio.html",
"guests.html",
"links.html",
"mailto:you@wherever.whatever?subject=the site")

For this example, the array is named "urls1," so that more than one drop-down menu can be added to the page (i.e., urls2, urls3, etc.). The function, 'go,' adds the new pages into the window when the user selects them from the drop-down menu:

{
n = which.selectedIndex;
if (n != 0)
{
var url = eval("urls" + num + "[n]")
if (win)
{
openWindow(url);
} else
{
location.href = url;
}
}

The 'go' function uses 3 arguments:

The first line, n=which.selectedIndex, holds the value of the “selectedIndex” property from the object which (our drop down menu). In other words, “n” now holds the position of the selected item in the menu (a number between 1 and 7). n is then used to find the URL to display, by capturing it from the urls1 array. Finally the URL is displayed, either in a new window (if win was true), or in the same window.

The HTML
The last step is to call the go function from the drop-down menu. Here is the HTML for the menu:

<form name="form1">

<select name="menu1" onChange="go(this, 1, false)">
<option>products
<option>about
<option>what's new?
<option>portfolio
<option>guests
<option>links
<option>emailus
</select>

</form>

The select tag generates a drop-down menu. This tag has an event handler onChange that is called when the user picks an item from the menu. This handler is used to call our function go with the reference to the drop-down menu object (this), the URL array we are using (there's only one, so 1), and our choice to open in a new window (false, or no).

You can take the above code and change the menu text and URLs to make drop-down menus for your own site.