Stupid Web Tricks: Load new pages without clicking Go

Avoid cluttering your site pages with buttons. Learn how to have your site load pages when a scrollable link is selected.

By Lauren Guzak and Patrick Joseph

(1/26/99, updated 6/22/01)

This trick is a good way to avoid cluttering up your pages with ugly JavaScript-generated buttons. Say that you want to put a list of links in a scrollable box as a nice, space-saving alternative to a long list using <OL>, <UL>, or just a bunch of <BR> tags. Normally your visitors would select a link and then click a Go button to go to the page.

You can take out the extra step of clicking the Go button by having the new page load as soon as the scrollable link is selected. Here's how:

Step One
Paste the following code into the part of your page where you want the scrollable list box to be displayed:

<FORM name="QuickIndex" ><br> <p> <SELECT size=5 name="URL"<br> onChange="if(options[selectedIndex].value)<br> window.location.href=<br> (options[selectedIndex].value)"> <br> <OPTION value="ss01.html">Fade In, Fade Out</OPTION><br> <OPTION value="ss02.html">Click 'n' Go</OPTION><br> <OPTION value="ss03.html">Timing Your Splash Page</OPTION><br> <OPTION value="ss04.html">Easy Includes for Everyone</OPTION><br> <OPTION value="ss05.html">Super Ninja Mailtos</OPTION><br> <OPTION value="ss06.html">Home Sweet Home Page</OPTION><br> <OPTION value="ss07.html">Slick slide show</OPTION><br> <OPTION value="ss08.html">Add a Watermark</OPTION><br> <OPTION value="ss09.html">Search Me</OPTION><br> </SELECT><br> <br> <NOSCRIPT><br> <INPUT type=submit value="Go"><br> </NOSCRIPT><br> </FORM>

Step Two
Replace our links (in the <OPTION> tags' value attributes) and link text with your own. Add or remove <OPTION> elements as needed.

Step Three
Make sure not to omit the <NOSCRIPT> option from the code. This gives people with older browsers that can't see your JavaScript-powered list a button to click so they can still navigate your site. If you see that button in our example below, your browser doesn't support this JavaScript (unless you're on Navigator 2.0, which doesn't support <NOSCRIPT>). Note that the Go button will only work if you have a CGI program that can process the form.

Here's what you'll get:

To save even more space, change this scrolling box to a one-line drop-down menu by removing the size=5 attribute from the <SELECT> tag. To make the first option explanatory and not navigate when selected, give it an empty value attribute (value=""), as in <OPTION value="">Go to page:</OPTION>.

Lauren Guzak is a project manager for Ask Jeeves, and Patrick Joseph is a freelance writer.