Drop down menu onClick not working

Not sure why this isn't working? Doesn't launch the page I wan

Page 1 of 1

11 Replies - 11183 Views - Last Post: 28 April 2010 - 02:47 PM

#1 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Drop down menu onClick not working

Posted 22 February 2010 - 11:47 AM

Hi,

I'm making a drop down menu for my site and I can't seem to get why this drop down menu isn't launching the pages I want. Can anyone see what the problem is?


Thanks in advance,
bmcc81


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.dropDown {
	width:150px;
}
</style>
<script> 
function goToPage(url) { 
if (url != "") 
	{ 
	.open(url); 
	} 
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form>
<label></label>
<select size="5" accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)" class="dropDown">
  <option selected>Please select one</option>
  <option value="http://search.msn.com/">MSN Search</option>
  <option value="http://www.google.com/">Google</option>
  <option value="http://www.search.com/">Search.com</option>
  <option value="http://www.dogpile.com/">Dogpile</option>
</select>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Drop down menu onClick not working

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1219
  • View blog
  • Posts: 7,365
  • Joined: 07-September 06

Re: Drop down menu onClick not working

Posted 22 February 2010 - 12:40 PM

Try this (it just changes the window's location, but I think that is what you were going for:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
.dropDown { 
        width:150px; 
} 
</style> 
<script>  
function goToPage(url) {  
        if (url != "")  
        {  
                window.location = url;
        }  
} 
</script> 
</head> 
<body bgcolor="#FFFFFF"> 
<form> 
<label></label> 
<select size="5" accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)" class="dropDown"> 
  <option selected>Please select one</option> 
  <option value="http://search.msn.com/">MSN Search</option> 
  <option value="http://www.google.com/">Google</option> 
  <option value="http://www.search.com/">Search.com</option> 
  <option value="http://www.dogpile.com/">Dogpile</option> 
</select> 
</body> 
</html>


Hope that helps.
Was This Post Helpful? 1
  • +
  • -

#3 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Drop down menu onClick not working

Posted 23 February 2010 - 08:22 AM

Thanks BetaWar,

you've come through again, thanks alot.

:bananaman:
Was This Post Helpful? 0
  • +
  • -

#4 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Drop down menu onClick not working

Posted 23 February 2010 - 09:55 AM

One more question actually.

How would you make it launch blank? I've tried this...


<form>
<select size="11" accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)" class="dropDown"> 
  <option selected>Please select one</option> 
  <option value="https://google.com" target="_blank">Google</option>


and also I've tried...


<form>
<select size="11" accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)" class="dropDown" target="_blank"> 
  <option selected>Please select one</option> 
  <option value="https://google.com" target="_blank">Google</option>


Do you know what I'm doing wrong?

Thanks again!

- bmcc
Was This Post Helpful? 0
  • +
  • -

#5 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1219
  • View blog
  • Posts: 7,365
  • Joined: 07-September 06

Re: Drop down menu onClick not working

Posted 23 February 2010 - 10:14 AM

Okay, for this one you need to change a few more things around. First you need to send the actual selected object to the function (instead of just the URL), this makes it easier, because we can just access its properties and not have to worry about whether or not we have passed all the necessary parameters around. Then we need to check and make sure that the target field is equal to _blank, if it is we open a new window, otherwise we open the link in the same window:

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<style type="text/css">  
<!--  
.dropDown {  
        width:150px;  
}  
</style>  
<script>   
function goToPage(obj) {   
        if (obj.value != "" && obj.target == "_blank")
        {
                window.open(obj.value); 
        }
        else if(obj.value != "")
        {
                window.location = obj.value;
        }
}  
</script>  
</head>  
<body bgcolor="#FFFFFF">  
<form>  
<label></label>  
<select size="5" accesskey="S" onchange="goToPage(this.options(this.selectedIndex))" class="dropDown">  
  <option selected>Please select one</option>  
  <option value="http://search.msn.com/">MSN Search</option>  
  <option value="http://www.google.com/" target="_blank">Google</option>  
  <option value="http://www.search.com/">Search.com</option>  
  <option value="http://www.dogpile.com/">Dogpile</option>  
</select>  
</body>  
</html>


At the moment I have set it up so only Google opens in a new window.

Hope that helps
Was This Post Helpful? 1
  • +
  • -

#6 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Drop down menu onClick not working

Posted 23 February 2010 - 10:39 AM

Oh yeah and how come this doesn't work in Firefox?

Is there some kinda of way to get them to work on both browsers?

Thanks,
bmcc
Was This Post Helpful? 0
  • +
  • -

#7 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1219
  • View blog
  • Posts: 7,365
  • Joined: 07-September 06

Re: Drop down menu onClick not working

Posted 23 February 2010 - 01:08 PM

Okay, as it turns out FF requires that you treat the selection's options as an array instead of a function. Then it also doesn't allow for additional properties, so I merged the target and value properties by using a double colon between them (::).

Now it works in FF and IE8 the same:
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>Untitled Document</title>   
<style type="text/css">   
<!--   
.dropDown {   
        width:150px;   
}   
</style>   
<script>    
function goToPage(obj) {    
        if (obj.value != "" && obj.value.split("::")[0] == "_blank") 
        {
                window.open(obj.value.split("::")[1]);  
        } 
        else if(obj.value != "") 
        { 
                window.location = obj.value; 
        } 
}   
</script>   
</head>   
<body bgcolor="#FFFFFF">   
<form>   
<label></label>   
<select size="5" accesskey="S" onchange="goToPage(this.options[this.selectedIndex])" class="dropDown">   
  <option selected>Please select one</option>   
  <option value="http://search.msn.com/">MSN Search</option>   
  <option value="_blank::http://www.google.com/">Google</option>   
  <option value="http://www.search.com/">Search.com</option>   
  <option value="http://www.dogpile.com/">Dogpile</option>   
</select>   
</body>   
</html>


Hope that helps.
Was This Post Helpful? 1
  • +
  • -

#8 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Drop down menu onClick not working

Posted 01 March 2010 - 11:57 AM

It seems that it only works in Firefox now. Do you know why? Should I make a if IE do this script?

Thanks,
Brandon
Was This Post Helpful? 0
  • +
  • -

#9 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Drop down menu onClick not working

Posted 08 March 2010 - 10:29 AM

View Postbmcc81, on 01 March 2010 - 01:57 PM, said:

It seems that it only works in Firefox now. Do you know why? Should I make a if IE do this script?

Thanks,
Brandon



Hi again,

Well this is my script:
<script>    
function goToPage(obj) {    
        if (obj.value != "" && obj.value.split("::")[0] == "_blank") 
        {
                window.open(obj.value.split("::")[1]);  
        } 
        else if(obj.value != "") 
        { 
                window.location = obj.value; 
        } 
}   
</script>



and this is my form.

<form>
  <select size="5" accesskey="S" onchange="goToPage(this.options[this.selectedIndex])" class="dropDown">  
    <option selected>Choisissez une aire urbaine</option>
    <option value="https://data2.beyond2020.com/ct/carto.php?lang=fr&minx=-1964446&maxy=467697&l=64714">Abbotsford</option>
    <option value="https://data2.beyond2020.com/ct/carto.php?lang=fr&minx=1190437&maxy=-334241&l=75687">Barrie</option>
    <option value="https://data2.beyond2020.com/ct/carto.php?lang=fr&minx=1379157&maxy=-317342&l=62678">Belleville</option>
    <option value="https://data2.beyond2020.com/ct/carto.php?lang=fr&minx=1184064&maxy=-489842&l=66687">Brantford</option>
  </select>
</form>



Can anyone see why this wouldn`t launch a blank window when a city is selected?

Thanks,
Bmcc
Was This Post Helpful? 0
  • +
  • -

#10 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Drop down menu onClick not working

Posted 27 April 2010 - 11:57 AM

Only the second item in the list will open up in another window. Is there someway of fixing this so the whole thing will send you to another open page?

Thanks,
bmcc
Was This Post Helpful? 0
  • +
  • -

#11 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1219
  • View blog
  • Posts: 7,365
  • Joined: 07-September 06

Re: Drop down menu onClick not working

Posted 27 April 2010 - 12:12 PM

Ah, sorry it appears that you missed part of the code. So, we aren't allowed to give the option elements a target attribute (unless using HTML 5, which isn't commonly supported yet). So we have to add additional information into the option somewhere so we know how to make it act.

What I chose to do is add the information directly into the value attribute. So, what you do is take the url and add "_blank::" before it to open it in a new window/tab:
value="_blank::http://www.google.com/"

Notice that that contains the _blank::. The other options in my above example don't have that part so they open in the same window. All you need to do is add it to the other options and it should work (at least better than it was previously).

Hope that makes sense.
Was This Post Helpful? 0
  • +
  • -

#12 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Drop down menu onClick not working

Posted 28 April 2010 - 02:47 PM

Hi betawar

Thanks I missed that. It now makes sense.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1