Results 1 to 2 of 2

Thread: please help with double combo targeting an iframe

  1. #1
    Join Date
    Aug 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default please help with double combo targeting an iframe

    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

    --------------------------------------------------------------------------
    Code:
    <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>
    Last edited by ddadmin; 11-17-2008 at 06:11 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •