HTML selection list without a submit button
Sponsored Links
We all strive for good navigation on our web sites. Its the ultimate of any web developer to have a page linked to another by a maximum of 2 clicks. Drop down lists (HTML <FORM> <SELECT> elements) can be placed on all pages with links to the important pages on the web site. JavaScript allows us to make the visitor jump to a particular page by selecting an item from the drop down menu - and that too without a submit button. So you do not need to know any server-side language. JavaScript makes it easy to create a navigation list without a submit button. We employ the onChange() event handler along with location property of the window object.
// The following function is placed in the HTML head
function nav()
{
var w = document.myform.mylist.selectedIndex;
var url_add = document.myform.mylist.options[w].value;
window.location.href = url_add;
}
// This code is placed in the HTML body
<FORM NAME="myform">
Jump to:
<SELECT NAME="mylist" onChange="nav()">
<OPTION VALUE="../../index.html">Home Page
<OPTION VALUE="../../basics/index.php3">Basics
<OPTION VALUE="../../tutorials/index.php3">Tutorials
<OPTION VALUE="../../templates/index.php3">Web Design Templates
<OPTION VALUE="../../graphics/index.php3">Web Graphics Design
<OPTION VALUE="../index.php3">Tips and Tricks
<OPTION VALUE="../../design/index.php3">Web Page Design
<OPTION VALUE="../../services/index.php3">Services
</SELECT>
</FORM>
The values of all the options in this selection list are URLs. The onChange() event handler calls nav() function. This function stores the value of the selected item (the URL) in url_add variable. The window.location.href is then set to this variable.
Note: This selection list does not employ a "submit" button.
Page contents: HTML drop down selection list without a submit button that takes the visitor to the selected page directly.
Comments, questions, feedback... whatever!
Recent Articles
Recent Blog Posts
Popular Articles
- Hotmail Sign In page
- Create a Hotmail account - Instructions
- Create Gmail address
- Download and install Outlook Express
- Get your free Gmail address
- Outlook Express new version
- Create my own email address
- Browers for Windows list
- Get email address
- Color combinations for web sites and pages
- Create Yahoo ID
More web tips & tricks
- Outlook Express Help - tips & tricks (53)
- Windows Live Mail help and tips (36)
- Windows Mail help (25)
- Hotmail help and tips (42)
- Yahoo help & support (45)
- AOL email help (26)
- Gmail help and tips (36)
- Internet tips & tricks (12)
- Web Design tips & tricks (33)
- HTML, Javascript tips tricks (68)
- Web Promotion tips & tricks (8)
- Graphics tips & tricks (20)
