logo Send us mail:
contact@reliancewisdom.com
WhatsApp or call:
+234 (0)808 881 1560
TOGGLE NAVIGATION
Back to All Forum Posts
Creating Combo Link with Select Field using HTML and JavaScript
Ishola Ayinla    May 19, 2017 at 10:14 AM    1    1317
I need a help. Please I want to create a combo link using HTML and JavaScript whereby users can navigate to another page on change of a selected option from an HTML form selection box. How can I go about this?
Back to All Forum Posts

1 Answer
Ishola Wasiu says...
May 25, 2017 at 07:25 AM

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 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.

Open a new file and save it as "combo_link.htm" then place the following script inside HEAD section of the HTML document:

<script type="text/javascript" > 
<!-- 
function nav()
{
var w = document.myform.mylist.selectedIndex;
var url_add = 
document.myform.mylist.options[w].value;
window.location.href = url_add;
}
//--> 
</script>

Then type this in the BODY section:

<form name="myform">
<b>Jump to:</b>
<select name="mylist" onchange="nav()">
<option value="http://www.google.com">GOOGLE
``</option>
<option value="http://www.facebook.com">FACEBOOK
</option>
<option value="http://www.yahoomail.com">YAHOOMAIL
</option>
<option value="http://www.gmail.com">GMAIL
</option>
<option value="http://www.w3c.com">W3CONSORTIUM
</option>
<option value="http://www.niitstudent.com">NIIT STUDENT
</option>
</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. You can as well change the values of the option tags to urls of some pages in your website, e.g. index.htm, private/about.htm, etc., in relative to where you save this "combo_link.htm" file.


Full Details