JS Drop down

**GUIDesigner** · 09-01-2010, 02:54 AM

I am creating a drop down menu with an ok (image) button. I have all that working and it works fine. My issue is that I am wanting it to go to an iframe. Here is the coding with valid address in it that i am using. Can someone see where I am messing up?

<html>
<head>
<title>Dropdown Additional Links</title>
</head>

<body>



<form name="hop">

<select name="choose">
<option selected>Choose One</option>
<option value="http://mousetrax.com" target="site">Mousetrax</option>
<option value="http://yahoo.com" target="site">Yahoo</option>
<option value="http://microsoft.com">Microsoft</option>
<option value="http://personal-computer-tutor.com">Linda's Computer Stop</option>
<option value="http://personal-computer-tutor.com/abc">ABC Newsletter</option>
</select>
<input type="image" src="go.png" width="20px" height="20px" onClick="location=document.hop.choose.options

[document.hop.choose.selectedIndex].value;" value="GO!">

</form>

<iframe id="main" name="site" frameborder="2" width="100%" height="610px" src="images/logo.htm"></iframe>
</body>
</html>

**jscheuer1** · 09-01-2010, 06:32 AM

Code:

<input type="image" src="go.png" width="20px" height="20px" onClick="frames.site.location.href=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="GO!">

But some browsers may not be happy with that. So one could instead do:

Code:

<input type="image" src="go.png" width="20px" height="20px" onClick="document.getElementById('main').src=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="GO!">

**GUIDesigner** · 09-01-2010, 05:22 PM

Actually I tried both and they both just seem to reset the drop down options.

**jscheuer1** · 09-01-2010, 05:46 PM

Sorry, I didn't realize you had a form. Without the form, what I had should work. With a form, you need to use the form's onsubmit event (working demo):

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dropdown Additional Links</title>
<style type="text/css">
iframe {
	width: 100%;
	height: 610px;
	border: 2px solid #000;
}
</style>
</head>
<body>
<form name="hop" onsubmit="document.getElementById('main').src = this.elements.choose.value; return false;">
<select name="choose">
<option value="images/logo.htm" selected>Choose One</option>
<option value="http://mousetrax.com">Mousetrax</option>
<option value="http://yahoo.com">Yahoo</option>
<option value="http://microsoft.com">Microsoft</option>
<option value="http://personal-computer-tutor.com">Linda's Computer Stop</option>
<option value="http://personal-computer-tutor.com/abc">ABC Newsletter</option>
</select>
<input type="image" src="go.png" width="20" height="20" alt="GO!">
</form>
<iframe id="main" src="images/logo.htm"></iframe>
</body>
</html>

**GUIDesigner** · 09-13-2010, 07:23 PM

Thanks, that did work with my links that I added. I appreciate your assistance

Thread: JS Drop down

Thread Tools

Search Thread

JS Drop down

Thank

Bookmarks

Bookmarks

Posting Permissions