Using a form jump menu to target iFrame on a different page

Dev Shed Forums Sponsor:

March 20th, 2007, 03:18 PM

dledet1

Registered User

Join Date: Jan 2007

Location: Washington, DC

Posts: 8

Time spent in forums: 3 h 41 m 54 sec
Reputation Power: 0

Using a form jump menu to target iFrame on a different page

Any help is greatly appreciated! I am creating a drop down menu on my index page that will jump to a specific iframe on an inside page.

The only help I seem to find concerns form menus that are targeting iframes within the same page. Here is the code I have so far:

<form name="jump" target="iframetest">
<select name="menu" onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;">
<option selected="selected">Select a Tool</option>
<option value="about.htm">About CYM</option>
<option value="using.htm">Using the Toolkit</option>
<option value="acknow.htm">Acknowledgements</option>
<option value="toc.htm">Table of Contents</option>
</select>
</form>

I should have some javascript code that would go in the head tags, but I wasn't given any, so I would need some help with that as well.

Also, "iframetest" is what I named my iframe on the inside page.

Again, any help is appreciated! Thank you in advance!

Deanna

March 20th, 2007, 04:12 PM

magicxxxx

Contributing User

Join Date: Aug 2004

Location: UK, London

Posts: 94

Time spent in forums: 14 h 44 m 38 sec
Reputation Power: 9

Example

Hi, I would do this like that, hope it is what U need:

Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript1.2" type="text/javascript">
function  changeLocation(locationUrl)
{
 document.getElementById('iframetest').src=locationUrl

}
</script>
</head>

<body>
<form name="jump" target="iframetest">
<select name="menu" onchange="changeLocation(this.options[this.selectedIndex].value);">
<option selected="selected">Select a Tool</option>
<option value="about.htm">About CYM</option>
<option value="using.htm">Using the Toolkit</option>
<option value="acknow.htm">Acknowledgements</option>
<option value="toc.htm">Table of Contents</option>
</select>
</form>
<iframe id="iframetest" name="iframetest" src=""></iframe>
</body>
</html>

regards,
Piotr

March 20th, 2007, 04:41 PM

dledet1

Registered User

Join Date: Jan 2007

Location: Washington, DC

Posts: 8

Time spent in forums: 3 h 41 m 54 sec
Reputation Power: 0

Thanks for the reply! I was actually hoping to figure out how to target an iframe on a different page from the drop down form menu. I think this code targets it from within the same page.

Any other ideas? Thanks again!

March 20th, 2007, 05:06 PM

magicxxxx

Contributing User

Join Date: Aug 2004

Location: UK, London

Posts: 94

Time spent in forums: 14 h 44 m 38 sec
Reputation Power: 9

Maybe like this

It depends what is that different page? A popup window, or just other page in the same window.

1. Popup:

The small changes in my provious function

Code:

function  changeLocation(locationUrl)
{
 	var params ='width='+ 300 +',height='+ 300 +',resizable=yes,scrollbars=yes,menubar=no,statusbar=yes'
	var Win = window.open('test3.html','test',params);
	Win.document.getElementById('iframetest').src=locationUrl
}

First poping up new window and then passing the value to iframe in that window

2. If another page is supposed to be open after choosing something from the dropdown U just need to send that value by get or post to that page and from there pass it to src of the iframe.

hope now it will help

Regards,
Piotr

Using a form jump menu to target iFrame on a different page

Developer Shed Advertisers and Affiliates