How to create active drop down lists without using CGI
Would you like to have a space saving drop down list on your page containing a list of your favorite pages that you can visit with a simple button click as in the example below?
Don't worry if you don't have CGI access; the above drop down list was implemeted using JavaScript. Let's look at the source code (simply paste the following code block and customize it to add a drop-down list to your page):
<form name="form1" method="POST">
Select a page to visit:
<select name="dd1" size=1>
<option value="http://www.chami.com/tips/delphi/">
Delphi Tips
</option>
<option value="http://www.chami.com/tips/internet/">
Internet Tips
</option>
<option value="http://www.chami.com/tips/windows/">
Windows Tips
</option>
</select>
<input type="button"
onClick=
"location =
document.form1.dd1.options
[document.form1.dd1.selectedIndex].value;"
value="GO">
</form>
Listing #1 : HTML code. Download
dropdown (0.37 KB).
The
onClick code is the magic code that instruct JavaScript enabled browsers to redirect to a different location depending on the selected drop-down list item.
location =
document.form1.dd1.options
[document.form1.dd1.selectedIndex].value;
Listing #2 : JavaScript code. Download
onclick (0.2 KB).
To have the selected page open in a window other than inside the current document, if you're using frames for example, use the following
onClick code instead (assuming "win_name" is the name of the new window or target):
onClick=
"window.open(
document.form1.dd1.options
[document.form1.dd1.selectedIndex].value,
'win_name', '' );"
Listing #3 : JavaScript code. Download
newtargt (0.23 KB).
Applicable Keywords : HTML, Internet Explorer, Explorer 3.x, Explorer 4.x, Explorer 5.x, Internet, JavaScript, JavaScript 1.0, JavaScript 1.1, JavaScript 1.2, Mini Tutorial, Netscape Navigator, Navigator 2.x, Navigator 3.x, Communicator 4.x, Netscape 6.x, World Wide Web