Share this Page URL

Chapter 18. More JavaScript Fun > A Mortgage Calculator - Pg. 217

More JavaScript Fun 217 If you want to add nonactive items to the list (such as a "Select an item from this list" message or headings), use <OPTION> tags that take the following form: <OPTION VALUE="None">Item text Again, replace Item text with the text that you want to appear in the list. Here's the list structure with a few items added (there's a larger list in jslist.htm on the CD in this book): <SELECT WIDTH="20" onChange="JumpToIt(this)"> <OPTION VALUE="None">Select a JavaScript resource from this list ---> <OPTION VALUE="">SE Using JavaScript <OPTION VALUE=""> <OPTION VALUE="">ScriptSearch <OPTION VALUE="">Website Abstraction <OPTION VALUE="">The JavaScript Source </SELECT> Here's the JavaScript that is executed when the user selects a list item: <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- function JumpToIt(list) { var selection = list.options[list.selectedIndex].value if (selection != "None") location.href = selection } //--> </SCRIPT> The value of the currently selected list item is stored in the selection variable. If the value isn't "None," then the value is a URL, so the location.href property is set to that value, and away you go. A Mortgage Calculator For the final example, I show you a particularly powerful script that sets up a mortgage calculator. Figure 18.6 shows the calculator, which I created using form and table tags.