(page requirements)

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?
 
Select a page to visit:
 
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
 
 
 
Copyright © 2009 Chami.com. All Rights Reserved. | Advertise | Created in HTML Kit editor