Pull-down Menu, Text box, and Menu-Buttons

<html> 
<head>
<script language=javascript>
<!-- Hide from older browsers
 function getPage (page) {  
          window.location = page;
          }   
  // End hiding -->
</script>
</head>
<body>
<form name="demoForm">
<!-- **The Pull-Down List** -->
<select name="DEMOS"
<option value="" selected>JavaScript Demos
<option value="5update.html">Last Updated
<option value="5mouse.html">Mouseover Buttons
<option value="5images.html">Slide Show
</select>
<input value="Go" type=Button
onClick = "getPage(document.demoForm.DEMOS.options[DEMOS.selectedIndex].value)">
 <!-- **The Text Box** -->
<input type=text name="Location" value="http://" size=40 maxlength=80>
<input type=Button value="Go"
onClick = "getPage(document. demoForm.Location.value)">
</form>
<form name="SecondForm">
<!-- **The Buttons** -->
<input type="button" value="Pop-up" onClick="getPage('5alert.html')">
<input type="button" value="Mouseover" onClick="getPage('5mouse.html')">
<input type="button" value="Slide Show" onClick="getPage('5images.html')">
<input type="button" value="New Window" onClick="getPage('5newwin.html')">
</form>
</body>
</html>

 
Reusing Functions:  In this example, a single function is reused for several separate events. The"getPage(page)" function can be called from any of the three sets of form items (pull-down menu, text-box, or menu-buttons). Compare the name of this function to the one in the previous example:
  winBob( )
  getPage(page)
A function name is always followed by a set of parentheses - ( ). Sometimes the parentheses are empty and sometimes they contain a value or parameter. A function that includes a value between the parentheses must be passed some information before it can proceed. In this case, the "getPage(page)" function must be given the URL of the page to open. A simple example of passing information is seen in the menu-buttons of the SecondForm.
  onClick="getPage('myDemoPage.html')"
The URL contained within the parentheses is passed to the function stored in the <head> of the document. The function proceeds by changing the current page location to "myDemoPage.html".
 
The next two form elements are slightly more complicated:
  The Text-Box (name="Location"):
    onClick="getPage(document.demoForm.Location.value)"
  The Pull-down Options (name="Demos"):
    onClick="getPage(document.demoForm.DEMOS.options[DEMOS.selectedIndex].value)" In both cases, the text between the parentheses evaluates to a URL. In the Text-Box example, document.demoForm.Location is an address for the Text-Box. Roughly, it translates as "this document / the form named demoForm / the form element named Location." The remainder of the code, .value, retrieves the value of whatever precedes it. For any textbox, "textbox.value"="textEnteredbyUser".
 
The pull-down menu example starts off in a similar fashion document.demoForm.DEMOS is a pointer to the form element named DEMOS. The form element DEMOS has multiple options. JavaScript deals with this situation by numbering each option in the order it appears on the page starting with 0, e.g.: options[0], options[1], options[2], etc... Therefore, options[DEMOS.selectedIndex] indicates the currently selected item. Putting it all together: document.demoForm.DEMOS.options[DEMOS.selectedIndex].value indicates "the value of the selected option item within the group of form elements named Location."