please help with double combo targeting an iframe

[hall2003]

Basically i need a double combo box form to target an iframe on submit so that once a visitor to my site selects the type of photos they would like to view upon clicking the submit button which is named (load) in my script it would load the page into an iframe rather than going to a new page.

here is a copy of my script below which works fine to goto a new page but ive no idea where to begine to make this target an iframe..

any help would be very welcome, thanks in advance to anyone who can help me with this. steve

--------------------------------------------------------------------------


<form name="doublecombo">
<p align="center">
<select name="example" size="5" onChange="redirect(this.options.selectedIndex)" style="width: 150px">
<option>test gallery</option>
<option selected>nightlife photos</option>
</select>
<select name="stage2" size="5" style="width: 250px">
<option>you have not made a selection yet</option>
</select>
<input type="button" name="test" value="Load" onClick="go()" style="font-family: Arial; font-size: 10px; height:20; position:relative; width:40">
<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("the test page","20_07_2006/photos.htm")
//////////group[0][1]=new Option("News.com","http://www.news.com")///////////
//////////group[0][1]=new Option("News.com","http://www.news.com")///////////

group[1][0]=new Option("sorry, none available at this time","gallery.htm")

group[2][0]=new Option("sorry, none available at this time","gallery.htm")

group[3][0]=new Option("sorry, none available at this time","gallery.htm")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>

<iframe id="search" name="photos_frame" src="my_photo_page_needs_to_load_into_this_frame.htm" width=800 height=400 marginwidth=0 border=1 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

[ddadmin]

Please try and format any code in your post using the CODE tags. It just makes it easier to read.

Using the original script, here's the changes in red:


<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://cssdrive.com">CSS Drive</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("CSS Drive","http://cssdrive.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
document.getElementById("search").src=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form>

<iframe id="search" name="photos_frame" src="my_photo_page_needs_to_load_into_this_frame.htm" width=800 height=400 marginwidth=0 border=1 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>

Note that some sites have code that break out of an IFRAME/FRAME when called within one, and in those cases, the script won't be able to keep the site contained. CNN.com seems to do this.