Dropdown menu links..

SamHale · Jun 18, 2004

Argh, it's been a long time since i've used forms.
I want to set up a form with a drop down menu, then when an item is selected, and the (submit) button is pressed, a specific url appears in the iframe below.

Please could you help.
Thanks,
Sam.

PS. If it helps at all, heres the basic coding. (Theres going to be more people added incase you are wondering.)

<form>
<select name="Biographies">
<option value="Addy Roberts">
Addy Roberts
<option value="Arnie Arnieson">
Arnie Arnieson
</select>
<input type="submit" name="Submit" value="Go">
</form>

<iframe
name="bios"
src="blank.html"
frameborder="NO"
width="95%"
height="300"
allowtransparency="true"
background-color="transparent"
class="transparent">
</iframe>

miahmiah900 · Jun 18, 2004

for the submit button, make an onClick event which you can define in javascript elsewhere on the page (usually the header)

<input onClick="javascript:dropiframe()" type="submit" name="Submit" value="Go">

so, in the header, you would want something like this: (note, this is probably not functional code, you might need to look up the document model for getting and setting values in the javascript function) ...

<script language="javascript">

function dropiframe() {
bios.src = Biographies.value;
return false;
}

</script>

SamHale · Jun 20, 2004

Thank you for attempting to help, I've never ever used JavaScript, I heard its the horror of webdesign.

I tried pasting what you wrote into the header tags,

and then changed my coding to :

<option value="Addy Roberts" src="addy.html">

But then when I hit 'Go', I believe it just refreshed the page...

13sio · Jun 21, 2004

try to replace bios.src by bios.location,

Code:

<script>
function goURL() {
bios.location=document.fm.menu.value;
}
</script>

<form name="fm">
<select name="menu">
<option value="[URL unfurl="true"]http://www.google.com">Google[/URL]
<option value="[URL unfurl="true"]http://www.yahoo.com">Yahoo[/URL]
</select>
<button onClick="goURL();">GO</button>
</form>

<iframe 
   name="bios"
   src="blank.html"
   frameborder="NO"
   width="95%"
   height="300"
   allowtransparency="true"
   background-color="transparent"
  class="transparent">
</iframe>

hope this helps.

BillyRayPreachersSon · Jun 22, 2004

I think it's definately ".src" you need to change. I've added an ID to your iframe, and changed the select box to update it onchange:

Code:

<html>
<head></head>
<body>
<form>
	<select name="Biographies" onchange="document.getElementById('bios').src = this.value;">
		<option value="addyroberts.html">Addy Roberts</option>
		<option value="arniearnieson.html">Arnie Arnieson</option>
	</select>
	<input type="submit" name="Submit" value="Go">
</form>
<iframe id="bios" name="bios" src="blank.html" frameborder="no" width="95%" height="300" allowtransparency="true" background-color="transparent" class="transparent"></iframe>
</body>
</html>

Obviously, you need to ensure the URLs in the "value" of each option is correct.

Hope this helps,
Dan

BillyRayPreachersSon · Jun 22, 2004

>> I've never ever used JavaScript, I heard its the horror of webdesign.

You hear wrong, incidentally. JavaScript has nothing to do with web design at all - nor does HTML for that matter... They're part of web development, not web design, and like everything in this world, only a "horror" if you don't understand them ;o)

Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dropdown menu links..

SamHale

MIS

miahmiah900

Programmer

SamHale

MIS

13sio

Technical User

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor