[html] Drop-down menus - Overclock.net

tUDJ · 02-03-08

I'm making a basic webpage for a college assignment, I didn't put this in school help as its not a requirement I need, just something I want to include.

I want a dropdown menu so the user can select a category on my site, click submit and that opens the corresponding page.

I found this code online, it makes the dropdown menu fine, I can select an option fine but don't know how to make it link to a page

Quote:

<form action="Index.html">
<select size="1" name="Dropdown Menu">
<option value="" selected>Choose one</option>
<option value="CD's">CD's</option>
<option value="Vinyl">Vinyl</option>
<option value="Tickets">Tickets</option>
<option value="T-Shirts">T-Shirts</option>
<option value="Posters">Posters</option>
</select>
<input type="submit" value="Submit">
</form></center>

The way I have it, whatever option I choose, it opens my homepage (because of the top line)

Do I need to do something in JavaScript?

Don't start talking jargon either

I only have basic HTML knowledge.

Any help is much appritiated

thenovices · 02-05-08

i don't know much about web scripts either, but what I do know is that you put action="index.html", which sends all this information to index.html. Generally you will send the information to a page that handles the information (such as a .php page). Using PHP, you could do something like http://rafb.net/p/N3pnrq76.html

(it wasn't letting me paste the code here)

stupid · 02-06-08

Can't do this with pure html (at least I don't think so).

It is easy in a language such as php, asp, coldfusion, etc. but it doesn't look like you are into that at all. But in fact there is an easier way to do it just using a couple lines of javascript.

All you need is this javascript:

Code:

        function Navigate(drop_down_list) {
            var number = drop_down_list.selectedIndex;
            location.href = drop_down_list.options[number].value; }

And a call to it with your <select>'s onclick event.

I posted an example on my page: http://naspinski.net/post/HTMLJavaSc...-Redirect.aspx

Or, if you want it to run on your button clicking event, bind it to the button's onclick event.

Polska · 02-07-08

I was bored at lunch so I thought I would whip you up a quick self contained example of what you wanted. I tried to comment it a little to help you out. If you have no experience with javascript, read up on it, the 2 functions I wrote are fairly basic. Both functions use stupids method of redirection via javascript, the rest is just getting at the data and some basic error checking.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Dropdown List Redirection</title>
</head>
<body>
<script type="text/javascript">
    //this is a javascript comment
    //this function changes the page to the selected value of the dropdown list if it is not empty
    function Navigate(drop_down_list) {
       //get the selected index, and the value at the index
       var number = drop_down_list.selectedIndex;
       var value = drop_down_list.options[number].value;
       //if the value is not blank, redirect
       if(value!=""){
           location.href = value;
       }
    }
    
    //function is fired on submit
    function Navigate2(listid) {
       //check to see if browser supports function
       if(document.getElementById){
           //get reference to dropdown list
           var element = document.getElementById(listid);
           //check if an element was found
           if(element){
               //get the selected index, and the value at the index
               var number = element.selectedIndex;
               var value = element.options[number].value;
               //redirect if value is non empty, otherwise prompt user
               if(value!=""){
                   location.href = value;
               }else{
                   //alerts user to make a selection
                   alert("Please Make A Selection");
               }
           }
       }
    }
</script>


<form>
<!--this is an html comment-->
This is Method 1, which fires the javascript function when the dropdown list selection is changed
<br />
<!--in the lists onchange event call function Navigate with the keyword this, which essentially points to the list the onchange event belongs to-->
<select id="ddlSites" onchange="Navigate(this);" name="DropdownMenu">
<option value="" selected="selected">Choose one</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.overclock.net">Overclcok.net</option>
</select>
<p>&nbsp;</p>
This is Method Number 2, using a submit button.
<br />
<select id="ddlSites2" name="DropdownMenu2">
<option value="" selected="selected">Choose one</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.overclock.net">Overclcok.net</option>
</select>
<br />
<!--in the buttons onclick event call function Navigate2 with the ID of the List in quotes-->
<input id="Submit1" type="button" onclick="Navigate2('ddlSites2');" value="submit" />
</form>
</body>
</html>

tUDJ · 02-07-08

I solved this quite soon after posting using the Javascript method posted. Rep given

ninjinsamax3 · 02-13-08

Using JavaScript is much better since it will not affect the document type because when you are coding with HTML and XHTML, it becomes a bit annoying since you have to choose between frameset, strict, or transitional.

		Overclock.net - Overclocking.net > Software, Programming and Coding > Coding and Programming > Web Coding
[html] Drop-down menus

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)