JavaScript and Forms	2.6/5.0 (14 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
Matt Doyle

The FORM tag is usually used to create forms for sending to CGI scripts or other server-based software, but there's a lot that can be done at the browser end as well - with JavaScript! You can validate the data entered by the user before it's sent to the CGI script (this saves time and bandwidth); you can get the user to talk to your JavaScript program through form fields; or you can even design a menu system using forms and JavaScript. In fact, we're going to show you how to do just that.

A menu using JavaScript and forms
To see this in action, take a look at a page from one of our PageKits, filmstar. In the top left of the window you'll see a drop-down menu. When you pick a page from the menu, it'll take you straight to that page. Cool, huh? Now this is how we did it...

First, we make an array containing the URL's of all the pages in our drop-down menu. An array is just a list of objects - in this case, URL's. To make this easier we 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 URL's we want in the array:

var urls1 = new buildArray("",
"about.html",
"new.html",
"portfolio.html",
"guests.html",
"links.html",
"mailto:[email protected]?subject=the site");

We're naming our array urls1, so that if we wanted more than one drop-down menu in the page, we could easily add more (urls2, urls3 etc). This is also catered for in the next function, go, which loads the new pages into the window when the user selects them from the menu:

Go, go, go! Let's see some action...
function go (which, num, win)
{
n = which.selectedIndex;
if (n != 0)
{
var url = eval("urls" + num + "[n]")
if (win)
{
openWindow(url);
} else
{
location.href = url;
}
}
}

The go function takes 3 arguments. The first one, which, is the object whose event handler called the function - in this case, the drop down menu. This is passed so that the function knows where to find the menu object! The second argument, num, refers to the array of URL's we mentioned above; in this case there's only one array, urls1, so we'll pass the value 1 to the function. The third argument, win, is a boolean value (either true or false) - true means that a new window should be created for the selected page, while false means that the selected page should be opened in the current window.

Now the function itself should be fairly self-explanatory. The first line, n=which.selectedIndex, gets 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 looking it up in our urls1 array. Finally the URL is displayed, either in a new window (if win was true) or in the same window.

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

<form name="form1">

<select name="menu1" onChange="go(this, 1, false)">
<option>f i l m s t a r
<option>about
<option>what's new?
<option>portfolio
<option>guests
<option>links
<option>m a i l u s
</select>

</form>

The select tag generates a drop-down menu. As you can see, this tag has an event handler onChange, which is called when the user picks an item from the menu. We use this handler to call our function go with the reference to the drop-down menu object (this), the URL array we're using (there's only one, so 1) and whether we want the links to open in a new window (false, or no)

That's all there is to it! You can take the above code and change the menu text and URL's to make menus for your own sites. It's a great way to make a menu if screen real-estate is at a premium. Plus it teaches you a bit about using JavaScript with forms!

The End
That's the end of this tutorial. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.

If you would like to offer us feedback on this or any of the tutorials, please email us. Have fun!