Go to a URL/link from drop down list/menu in html+javascript 

In many web application, we see some kind of drop down list to go to a URL only by clicking on the list item, no need to click on any button. For the users, this is a nice experience that they don’t have to click on submit button.
I have described here in details the tutorial especially for beginners. Let we have a form like below:


<form method="post" action="http://www.example.com/submit.php">
<input type="submit" name="submit_button" value="Go">
<select name="url_list" >
<option value="http://www.example.com/index.html">list 1</option>
<option value="http://www.example.com/about.html">list 2</option>
</select>
</form>

we can improve the form performance by combining it with a simple javascript and it has below advantages:

1.It makes your page more efficient, because if JavaScript is enabled, the web browser can jump to the destination webpage itself without having to run the script. Also it is nicer for users because they do not need to select the “go” button.

2.The form will also continue to work with web browsers that do not have JavaScript available.

Now, the following example displays a drop down list with a js function. Include the js in your <head></head> of the file :


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin gotosite
function gotosite()
{
var URL = document.gotoform.url_list.options[document.gotoform.url_list.selectedIndex].value; window.location.href = URL;
}
// End gotosite -->
</script>

and now try the form like this :


<form name="gotoform" method="post" action="http://www.example.com/submit.php">
<noscript>
<!-- use noscript to only show this if no javascript is available -->
<input type="submit" name="submit_button" value="Go">
</noscript>
<select name="url_list" size="1" onChange="gotosite()">
<-- Value of first option is default, usually current page -->
<option value="http://www.example.com/submit.php"> Select a Site...</option>
<option value="http://www.example.com/index.html">list 1</option>
<option value="http://www.example.com/about.html">list 2</option>
</select>
</form>

we call ‘gotosite()’  function on ‘onChange’ of <select>, and this will help to jump to the url for each list.
Hope this will help the beginners for more reliable user experience.

Advertisements