WDN Logo

home-icon Home / HTML / HTML selection list without a submit button

HTML selection list without a submit button

HTML selection list without a submit button

We all strive for good navigation on our web sites. It’s the aim 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="http://www.youtube.com">YouTube</option>
<option value="http://www.9gag.com">9GAG</option>
<option value="http://www.wikipedia.org">Wikipedia</option>
<option value="http://www.yahoo.com">Yahoo!</option>
<option value="http://www.deviantart.com">DeviantArt</option>
<option value="http://www.flickr.com">Flickr</option>
<option value="http://www.twitter.com">Twitter</option>
<option value="http://www.tumblr.com">Tumblr</option>
</select>
</form>

Click here to see how this works!

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.

Sponsored Links

Search

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Internet Explorer jokes and funny images

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

Starting 2011, Google agreed to pay Mozilla Corporation a tad less than half a billion dollars over a period of 3 years if they kept Google as the default search engine on their Firefox web browser. This was a very smart move from the company. Because in 2008, Google had launched Chrome, their own web browser, which had the world's most popular search engine as the default. Additionally, by the end of 2011, Chrome's usage surpassed that of Firefox, and by early 2012, it had exceeded that of Internet Explorer. It was now the world's most popular web browser. So, even though some might think that Google spent a gargantuan sum of money needlessly, I admire the think-tanks at the company. They kept pushing the usage of their core product, the one that made them the most valuable web company - the Google search engine. By the way, in 2006, Google had dished out $57 million to have their search bar in the Firefox. This amounted to 85% of Mozilla Corporation's total revenue. [more...]

Share on Whats app Share on Facebook Share on Twitter Share on Google plus