Log in

View Full Version : select menu


blueandconfused
05-09-2005, 02:49 PM
How do I get the select menu to go to a website from the selection chosen. here is my code that i have done but i cant get it to work. any suggestions? thanks.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title> Best Friend Pets - Rabbits </title>
<link rel="stylesheet" href="main.css"type="text/css"/>
<script type="text/javascript" language="JavaScript">
<!--
var chosenSite = "";
function getSelectValue(formname,selectname){
var theMenu = document[formname][selectname];
var selecteditem = theMenu.selectedIndex;
return theMenu.options[selecteditem].value;
}//end function
function showSelectValue(formname,selectname,thevalue){
var theMenu = document[formname][selectname];
for (i=0; i<theMenu.options.length;i++){
var temp = theMenu.options[i].value;
if (temp == theValue){
theMenu.selectedIndex = i;
}//end if
}//end for
}//end function
function openSite(){
chosenSite = getSelectValue("breeds","rabbits");
window.location.href = chosenSite;
}//end function
//-->
</script>
</head>
<body bgcolor="#99CCFF" onLoad="window.defaultStatus=document.title">
<table border="0" width = 95% cellpadding="0" cellspacing="0">
<tr>
<td colspan="1"> <a href="index.html" onMouseover="window.status='Best Friend Pets Homepage'; return true"
onMouseout="window.status=' '; return true"><img src="images\logo.png" height="90" width="90" alt="Click here to go to the BFP Homepage"></a></td>
<td colspan="1"><h1 align="center"><font color="#000099" size="12pz"> Best Friend Pets, Inc.</font> </h1></td>
</tr>
<tr>
<td width="10%" valign="top"><b>
<br />
<br />
<h4><a href="index.html" onMouseover="window.status='Best Friend Pets Homepage'; return true"
onMouseout="window.status=' '; return true">Home</a>
<br />
<br />
<br />
<a href="dogs.html" onMouseover="window.status='Dogs'; return true"
onMouseout="window.status=' '; return true">Dogs</a>
<br/>
<br />
<br />
<font color="#000099" onMouseover="window.status='Rabbits'; return true"
onMouseout="window.status=' '; return true">Rabbits</font>
<br/>
<br />
<br />
<a href="cats.html" onMouseover="window.status='Cats'; return true"
onMouseout="window.status=' '; return true">Cats</a>
<br/>
<br />
<br />
<a href="donkeys.html" onMouseover="window.status='Donkeys'; return true"
onMouseout="window.status=' '; return true">Donkeys</a>
<br/>
<br />
<br />
<a href="cows.html" onMouseover="window.status='Cows'; return true"
onMouseout="window.status=' '; return true">Cows</a> </h4>
<br/>
<br />
<br />
</b>
</td>
<td width="50%" valign="top">
<div>
<h4>Recognized Breeds</h4>
<form name="breeds"></form>
<select name="rabbits">
<option value="http://www.geocities.com/doubledutchinfo/breedsamerican.html">American</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsafl.html">American Fuzzy Lop</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsamsable.html">American Sable</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsangeng.html">Angora- English</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsangfre.html">Angora- French</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsanggiant.html">Angora- Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsangsatin.html">Angora- Satin</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsbelhare.html">Belgian Hare</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsbeveren.html">Beveren</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsbritpetite.html">Britannia Petite</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscalifornian.html">Californian</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschampagne.html">Champagne D'Argent</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscheckgiant.html">Checkered Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschinam.html">Chinchilla- American</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschingiant.html">Chinchilla- Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedschinstd.html">Chinchilla- Standard</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscinnamon.html">Cinnamon</option>
<option value="http://www.geocities.com/doubledutchinfo/breedscreamargent.html">Cream D' Argent</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsdutch.html">Dutch</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsdwarfhotot.html">Dwarf Hotot</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsengspot.html">English Spot</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsflemgiant.html">Flemish Giant</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsfloridawht.html">Florida White</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsharlequin.html">Harlequin</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshavana.html">Havana</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshimalayan.html">Himalayan</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshollop.html">Holland Lop</option>
<option value="http://www.geocities.com/doubledutchinfo/breedshotot.html">Hotot</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsjwooly.html">Jersey Wooly</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslilac.html">Lilac</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslopseng.html">Lop, English</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslopsfre.html">Lop, French</option>
<option value="http://www.geocities.com/doubledutchinfo/breedslopsmini.html">Lop, Mini</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsminirex.html">Mini Rex</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsnethdwarf.html">Netherland Dwarf</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsnewzea.html">New Zealand</option>
<option value="http://www.geocities.com/doubledutchinfo/breedspal.html">Palomino</option>
<option value="http://www.geocities.com/doubledutchinfo/breedspolish.html">Polish</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsrex.html">Rex</option>
<option value="http://www.geocities.com/doubledutchinfo/breedsrhine.html">Rhinelander</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssatin.html">Satin</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssilver.html">Silver</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssilvfox.html">Silver Fox</option>
<option value="http://www.geocities.com/doubledutchinfo/breedssilvmart.html">Silver Marten</option>
<option value="http://www.geocities.com/doubledutchinfo/breedstan.html">Tan</option>
<input type="button" name="breeds" value="Go There!" onclick="openSite();">
</select>

<h4>Unrecognized Breeds</h4>
German Angora<br />
Hulstlander<br />
Lion Head<br />
Mini Plush Lop<br />
<a href="http://www.geocities.com/doubledutchinfo/breedssatinmini.html">Mini Satin</a><br />
Perlfee<br />
Royal Lop<br />
Thrianta<br />
Velveteen Lop<br />

<br />
<br />
<a href="#" onClick="history.go(-1)" onMouseover="window.status='Go Back!'; return true"
onMouseout="window.status=' '; return true">< Back</a>
<br />
<br />

</div>
</td>
</tr>
</table>
<center><font face="Century Gothic"><b><a href="index.html" onMouseover="window.status='Best Friend Pets Homepage'; return true"
onMouseout="window.status=' '; return true">Home</a> | <a href="dogs.html" onMouseover="window.status='Dogs'; return true"
onMouseout="window.status=' '; return true">Dogs</a> | Rabbits |
<a href="cats.html" onMouseover="window.status='Cats'; return true"
onMouseout="window.status=' '; return true">Cats</a> | <a href="donkeys.html" onMouseover="window.status='Donkeys'; return true"
onMouseout="window.status=' '; return true">Donkeys</a> | <a href="cows.html" onMouseover="window.status='Cows'; return true"
onMouseout="window.status=' '; return true">Cows</a></b></font></center>
</body>
</html>
mwinter
05-09-2005, 07:59 PM
How do I get the select menu to go to a website from the selection chosen. here is my code that i have done but i cant get it to work. any suggestions?Well, your markup is invalid, so it's not that surprising that nothing happens.


<script type="text/javascript" language="JavaScript">The language attribute is deprecated and redundant. Just use the type attribute.


<!--Using SGML comment delimiters to "hide" scripts is equally deprecated and unnecessary. Moreover, if you actually served your XHTML document as XHTML, your script would be completely ignored, so it's not a good habit to get in to.


var chosenSite = "";Why did you make this variable global? It has no use outside of the openSite function, so it shouldn't be granted wider scope. In fact, a variable is redundant as the result of the function call can be assigned to the href property of the location object directly.


function getSelectValue(formname,selectname){
var theMenu = document[formname][selectname];It is better to use the forms and elements collections:


var theMenu = document.forms[formname].elements[selectname];That said, it isn't necessary in this case. I'll demonstrate later.


<form name="breeds"></form>You've closed the form. I think you'll agree that this is a mistake.

All form elements must have an action attribute, and you should use this to point to a redirection service which can forward the user if they have client-side scripting disabled. There are free services that can perform this. A few are listed below, and the first is used in the example. However, you should register (it's free) before you actually use the service.


Your CGI (http://www.yourcgi.com/html/JBox.html)
WWW Toolz (http://wwwtoolz.com/scripts/descriptions.asp?a=2)
CGI For Me (http://www.cgiforme.com/)



<input type="button" name="breeds" value="Go There!" onclick="openSite();">
</select>You cannot place an input element inside a select element. I also think 40+ options is rather much for this sort of navigation technique. Anyway...


function goTo(list) {
var i = list.selectedIndex,
u;

if(-1 != i) {
u = list.optionsoption[/b] element
* will always have a URL as its [i]value attribute. However,
* for this generic demonstration, it's more robust to show it.
*/
if(u && /^https?:\/\/[^.]+(\.[^.])+/.test(u)) {
location.href = u;
}
}
}

<form action="http://jbox.yourcgi.com/jbox.cgi" method="post"
onsubmit="goTo(this.elements['url']); return false;">
<select name="url">
<option value="http://www.google.com/">Google</option>
</select>
<input type="submit" value="Go!">
</form>Hope that helps,
Mike