I have 32 different iframe url's I want displayed to the right of a set of input selections. The first is BOYS or GIRLS, and the second is their GRADE. Depending on the combo, I'd like to pull up the corresponding iframe to the right of it.

How would I go about this? All I have so far are the buttons I'd like involved. The iframe box would be that height, and would give the entire thing a width of about 1000px.

Any help is greatly appreciated.

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>

  <script>
  $(function() {
    $( "#radiox" ).buttonset();
  });
  </script>
<style>

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}

.radioA label [
width:250px;
]
</style>


<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked"><label for="radio1" style="width:100px;">BOYS</label>
    <input type="radio" id="radio2" name="radio"><label for="radio2" style="width:100px;">GIRLS</label>
  </div>
</form>
<br>
<form>
  <div id="radiox">
    <input type="radio" id="radioA" name="radio" checked="checked"><label for="radioA" style="width:100px;">12th Grade</label>
    <input type="radio" id="radioB" name="radio"><label for="radioB" style="width:100px;">11th Grade</label><br>
    <input type="radio" id="radioC" name="radio"><label for="radioC" style="width:100px;">10th Grade</label>
    <input type="radio" id="radioD" name="radio"><label for="radioD" style="width:100px;">9th Grade</label><br>  
    <input type="radio" id="radioE" name="radio"><label for="radioE" style="width:100px;">8th Grade</label>
    <input type="radio" id="radioF" name="radio"><label for="radioF" style="width:100px;">7th Grade</label><br>  
    <input type="radio" id="radioG" name="radio"><label for="radioG" style="width:100px;">6th Grade</label>
    <input type="radio" id="radioH" name="radio"><label for="radioH" style="width:100px;">5th Grade</label><br>  
    <input type="radio" id="radioI" name="radio"><label for="radioI" style="width:100px;">4th Grade</label>
    <input type="radio" id="radioJ" name="radio"><label for="radioJ" style="width:100px;">3rd Grade</label><br>  
    <input type="radio" id="radioK" name="radio"><label for="radioK" style="width:100px;">2nd Grade</label>
    <input type="radio" id="radioL" name="radio"><label for="radioL" style="width:100px;">1st Grade</label><br>  
    <input type="radio" id="radioM" name="radio"><label for="radioM" style="width:100px;">7 Year Olds</label>
    <input type="radio" id="radioN" name="radio"><label for="radioN" style="width:100px;">6 Year Olds</label><br>  
    <input type="radio" id="radioO" name="radio"><label for="radioO" style="width:100px;">5 Year Olds</label>
    <input type="radio" id="radioP" name="radio"><label for="radioP" style="width:100px;">4 Year Olds</label><br>  

</div>
</form>

I am not really sure what you want to do here. Do you want a display data read from your database or a call to another server, and then put the display in a frame? Do you want it onclick, onchange, or use a submit button?

Please do not use form tag when you do not send any data to your server (i.e. without action property) because it is quite confusing and is overused (similar to using table instead of div to format your display)...

commented: Appreciated! +2

That makes sense. Well, I want to call a specific cell range from a Google spreadsheet of mine as a button is clicked. So [boys + 4th] would bring up one thing, [boys + 5th] would bring up another iframe, and [girls + 6th] etc would bring up another.

As you can tell, I know very little about all of this. I just tried to get the buttons to look and behave as I wanted them to on a superficial level so you could best understand me.

Thank you for your time and attention.

Is this fiddle on to a way to achieve my goals? Click Here

Your link redirects us back to this thread, do you have the correct link by any chance to the fiddle?

Sorry about that. It's here http://jsfiddle.net/tdLnoxmo/
Only difference is that's just one variable. I want two things to select which is displayed.

Only difference is that's just one variable. I want two things to select which is displayed.

I maybe wrong, but are you asking if you can create a way where if you press one button, both videos/images show?

No. I want two sets of buttons. My visitors can select one from each set to see a unique result.

Example being A, B, C in one set. They pick one of those 3. Then there's another set of 1, 2, 3, 4, 5. They must also pick one of those. Based on the combination of what's picked, I want something else displayed.

If I took the fiddle as an example, I could have two choices of either Youtube or Vimeo. Then below I'd have a choice of Basketball, Baseball, and Football. If they chose Youtube and baseball, it would show a baseball video from Youtube. If they chose Vimeo and basketball, it would show them a basketball video on Vimeo. But instead of videos, I want different iframes leading to various google spreadsheets.

I apologize for not explaining myself well enough.

I have another fiddle which is closer to what I need. Only issue with it is that I'd need the iframe to show on the click.... and I'd like for the various iframes to be completely independent of one another. This one has PHP, where I was thinking of using divs to hide individual iframes of whatever url. http://jsfiddle.net/7j5c0fzv/1/

Not sure about "show on the click" because currently the script needs you to replace the correctly value. In other words, the current script directly use the value from radio button in the frame tage property. If you want a different set of value, you need to check for the radio button values and replace them before you use them.

function updateIframeSrc() {
    var genval = document.querySelector("input[name=gender]:checked").value;
    var graval = document.querySelector("input[name=grade]:checked").value;
    var gender = "";
    var grade = 0;
    if (genval == "Boy") { gender = "BigBoy"; }
    else if (genval == "Girl" { gender = "BigGirl"; }
    if (graval == "1st Grade") { grade = 1; }
    else if (graval == "2nd Grade") { grade = 2; }
    else if (graval == "3rd Grade") { grade = 3; }
    if (gender!="" && grade!=0) {
        iframe.src = "http://www.somewebsite.com/handle.php?gender=" + gender + "&grade=" + grade;
    /* For testing purposes */
        Output.innerHTML = iframe.src;
    }
    else { alert("Invalid options selected!"); }
    /* -- */
}

If you want multiple frame dynamically added to your page display, you need to dynamically create the output and add to the page (using document.createElement('div') and document.createElement('iframe')). However, the downside is that your page could be a big mess after being added multiple times. You need a good style sheet to deal with it.

I found someone to help me to the point where the functionality works, but now I just need for the css style to match my original desire. I can get the radio circles to appear as buttons in my script (at the bottom of this post), but cannot duplicate that feat in the script immediately below. Thank you for all the time and assistance.

**

THIS IS MY IDEAL FUNCTIONALITY

**

<script>
window.onload = init;
function init(){
    iframe = document.querySelector("#iframe");
    radios = document.querySelectorAll("input[type=radio]");
    for( var i = 0 ; i < radios.length ; i ++ ){
        var radio = radios[i];
        radio.onchange = updateIframeSrc;
    }
    updateIframeSrc();   
}

function updateIframeSrc(){
    var gender = document.querySelector("input[name=gender]:checked").value;
    var grade = document.querySelector("input[name=grade]:checked").value;
    var url;
    switch(gender){
        case "boys":
            switch(grade){
                case "1":
                    url = "http://www.boysgrade12.com";
                    break;
                case "2":
                    url = "http://www.boysgrade11.com";
                    break;
                case "3":
                    url = "http://www.boysgrade10.com";
                    break;
                case "4":
                    url = "http://www.boysgrade9.com";
                    break;
                case "5":
                    url = "http://www.boysgrade8.com";
                    break;
                case "6":
                    url = "http://www.boysgrade7.com";
                    break;
                case "7":
                    url = "http://www.boysgrade6.com";
                    break;
                case "8":
                    url = "http://www.boysgrade5.com";
                    break;
                case "9":
                    url = "http://www.boysgrade4.com";
                    break;
                case "10":
                    url = "http://www.boysgrade3.com";
                    break;
                case "11":
                    url = "http://www.boysgrade2.com";
                    break;
                case "12":
                    url = "http://www.boysgrade1.com";
                    break;
                case "13":
                    url = "http://www.boysage7.com";
                    break;
                case "14":
                    url = "http://www.boysage6.com";
                    break;
                case "15":
                    url = "http://www.boysage5.com";
                    break;
                case "16":
                    url = "http://www.boysage4.com";
                    break;
            }
            break;
        case "girls":
            switch(grade){
                case "1":
                    url = "http://www.girlsgrade12.com";
                    break;
                case "2":
                    url = "http://www.girlsgrade11.com";
                    break;
                case "3":
                    url = "http://www.girlsgrade10.com";
                    break;
                case "4":
                    url = "http://www.girlsgrade9.com";
                    break;
                case "5":
                    url = "http://www.girlsgrade8.com";
                    break;
                case "6":
                    url = "http://www.girlsgrade7.com";
                    break;
                case "7":
                    url = "http://www.girlsgrade6.com";
                    break;
                case "8":
                    url = "http://www.girlsgrade5.com";
                    break;
                case "9":
                    url = "http://www.girlsgrade4.com";
                    break;
                case "10":
                    url = "http://www.girlsgrade3.com";
                    break;
                case "11":
                    url = "http://www.girlsgrade2.com";
                    break;
                case "12":
                    url = "http://www.girlsgrade1.com";
                    break;
                case "13":
                    url = "http://www.girlsage7.com";
                    break;
                case "14":
                    url = "http://www.girlsage6.com";
                    break;
                case "15":
                    url = "http://www.girlsage5.com";
                    break;
                case "16":
                    url = "http://www.girlsage4.com";
                    break;
            }
            break;
    }
    iframe.src = url;
}
</script>


<form style="float:left;">
    <input type="radio" name="gender" value="boys" checked/>Boys
    <input type="radio" name="gender" value="girls"/>Girls<br/><br>
    <input type="radio" name="grade" value="1" checked/>12th Grade
    <input type="radio" name="grade" value="2" />11th Grade<br/>
    <input type="radio" name="grade" value="3" />10th Grade
    <input type="radio" name="grade" value="4" />9th Grade<br/>
    <input type="radio" name="grade" value="5" />8th Grade
    <input type="radio" name="grade" value="6" />7th Grade<br/>
    <input type="radio" name="grade" value="7" />6th Grade
    <input type="radio" name="grade" value="8" />5th Grade<br/>
    <input type="radio" name="grade" value="9" />4th Grade
    <input type="radio" name="grade" value="10" />3rd Grade<br/>
    <input type="radio" name="grade" value="11" />2nd Grade
    <input type="radio" name="grade" value="12" />1st Grade<br/>
    <input type="radio" name="grade" value="13" />7 Year Olds
    <input type="radio" name="grade" value="14" />6 Year Olds<br/>
    <input type="radio" name="grade" value="15" />5 Year Olds
    <input type="radio" name="grade" value="16" />4 Year Olds<br/>
</form>
<br>
<div>
    <iframe id="iframe" style="margin-left:60px; width:600px; height:200px;"></iframe>
</div>

**

THIS IS MY IDEAL STYLE

**

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });

  $(function() {
    $( "#radiox" ).buttonset();
  });
  </script>
<style>
body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}

</style>
<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked"><label for="radio1" style="width:100px;">BOYS</label>
    <input type="radio" id="radio2" name="radio"><label for="radio2" style="width:100px;">GIRLS</label>
  </div>
</form>
<br>
<form>
  <div id="radiox">
    <input type="radio" id="radioA" name="radio" checked="checked"><label for="radioA" style="width:100px;">12th Grade</label>
    <input type="radio" id="radioB" name="radio"><label for="radioB" style="width:100px;">11th Grade</label><br>
    <input type="radio" id="radioC" name="radio"><label for="radioC" style="width:100px;">10th Grade</label>
    <input type="radio" id="radioD" name="radio"><label for="radioD" style="width:100px;">9th Grade</label><br>  
    <input type="radio" id="radioE" name="radio"><label for="radioE" style="width:100px;">8th Grade</label>
    <input type="radio" id="radioF" name="radio"><label for="radioF" style="width:100px;">7th Grade</label><br>  
    <input type="radio" id="radioG" name="radio"><label for="radioG" style="width:100px;">6th Grade</label>
    <input type="radio" id="radioH" name="radio"><label for="radioH" style="width:100px;">5th Grade</label><br>  
    <input type="radio" id="radioI" name="radio"><label for="radioI" style="width:100px;">4th Grade</label>
    <input type="radio" id="radioJ" name="radio"><label for="radioJ" style="width:100px;">3rd Grade</label><br>  
    <input type="radio" id="radioK" name="radio"><label for="radioK" style="width:100px;">2nd Grade</label>
    <input type="radio" id="radioL" name="radio"><label for="radioL" style="width:100px;">1st Grade</label><br>  
    <input type="radio" id="radioM" name="radio"><label for="radioM" style="width:100px;">7 Year Olds</label>
    <input type="radio" id="radioN" name="radio"><label for="radioN" style="width:100px;">6 Year Olds</label><br>  
    <input type="radio" id="radioO" name="radio"><label for="radioO" style="width:100px;">5 Year Olds</label>
    <input type="radio" id="radioP" name="radio"><label for="radioP" style="width:100px;">4 Year Olds</label><br>  
</div>
</form>

I figured it out. I needed to add labels and ID's and make them match. Here's the final product. Thanks a ton, guys.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#radiox" ).buttonset();
  });
  </script>

<style>
body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}

</style>


<script>
window.onload = init;
function init(){
    iframe = document.querySelector("#iframe");
    radios = document.querySelectorAll("input[type=radio]");
    for( var i = 0 ; i < radios.length ; i ++ ){
        var radio = radios[i];
        radio.onchange = updateIframeSrc;
    }
    updateIframeSrc();   
}

function updateIframeSrc(){
    var gender = document.querySelector("input[name=gender]:checked").value;
    var grade = document.querySelector("input[name=grade]:checked").value;
    var url;
    switch(gender){
        case "boys":
            switch(grade){
                case "1":
                    url = "http://www.boysgrade12.com";
                    break;
                case "2":
                    url = "http://www.boysgrade11.com";
                    break;
                case "3":
                    url = "http://www.boysgrade10.com";
                    break;
                case "4":
                    url = "http://www.boysgrade9.com";
                    break;
                case "5":
                    url = "http://www.boysgrade8.com";
                    break;
                case "6":
                    url = "http://www.boysgrade7.com";
                    break;
                case "7":
                    url = "http://www.boysgrade6.com";
                    break;
                case "8":
                    url = "http://www.boysgrade5.com";
                    break;
                case "9":
                    url = "http://www.boysgrade4.com";
                    break;
                case "10":
                    url = "http://www.boysgrade3.com";
                    break;
                case "11":
                    url = "http://www.boysgrade2.com";
                    break;
                case "12":
                    url = "http://www.boysgrade1.com";
                    break;
                case "13":
                    url = "http://www.boysage7.com";
                    break;
                case "14":
                    url = "http://www.boysage6.com";
                    break;
                case "15":
                    url = "http://www.boysage5.com";
                    break;
                case "16":
                    url = "http://www.boysage4.com";
                    break;
            }
            break;
        case "girls":
            switch(grade){
                case "1":
                    url = "http://www.girlsgrade12.com";
                    break;
                case "2":
                    url = "http://www.girlsgrade11.com";
                    break;
                case "3":
                    url = "http://www.girlsgrade10.com";
                    break;
                case "4":
                    url = "http://www.girlsgrade9.com";
                    break;
                case "5":
                    url = "http://www.girlsgrade8.com";
                    break;
                case "6":
                    url = "http://www.girlsgrade7.com";
                    break;
                case "7":
                    url = "http://www.girlsgrade6.com";
                    break;
                case "8":
                    url = "http://www.girlsgrade5.com";
                    break;
                case "9":
                    url = "http://www.girlsgrade4.com";
                    break;
                case "10":
                    url = "http://www.girlsgrade3.com";
                    break;
                case "11":
                    url = "http://www.girlsgrade2.com";
                    break;
                case "12":
                    url = "http://www.girlsgrade1.com";
                    break;
                case "13":
                    url = "http://www.girlsage7.com";
                    break;
                case "14":
                    url = "http://www.girlsage6.com";
                    break;
                case "15":
                    url = "http://www.girlsage5.com";
                    break;
                case "16":
                    url = "http://www.girlsage4.com";
                    break;
            }
            break;
    }
    iframe.src = url;
}
</script>


<form style="float:left;">
  <div id="radiox">
    <input type="radio" name="gender" id="boys" value="boys" checked/><label for="boys" style="width:100px;">Boys</label>
    <input type="radio" name="gender" id="girls" value="girls"/><label for="girls" style="width:100px;">Girls</label><br/><br>
    <input type="radio" name="grade" id="1" value="1" checked/><label for="1" style="width:100px;">12th Grade</label>
    <input type="radio" name="grade" id="2" value="2" /><label for="2" style="width:100px;">11th Grade</label><br/>
    <input type="radio" name="grade" id="3" value="3" /><label for="3" style="width:100px;">10th Grade</label>
    <input type="radio" name="grade" id="4" value="4" /><label for="4" style="width:100px;">9th Grade</label><br/>
    <input type="radio" name="grade" id="5" value="5" /><label for="5" style="width:100px;">8th Grade</label>
    <input type="radio" name="grade" id="6" value="6" /><label for="6" style="width:100px;">7th Grade</label><br/>
    <input type="radio" name="grade" id="7" value="7" /><label for="7" style="width:100px;">6th Grade</label>
    <input type="radio" name="grade" id="8" value="8" /><label for="8" style="width:100px;">5th Grade</label><br/>
    <input type="radio" name="grade" id="9" value="9" /><label for="9" style="width:100px;">4th Grade</label>
    <input type="radio" name="grade" id="10" value="10" /><label for="10" style="width:100px;">3rd Grade</label><br/>
    <input type="radio" name="grade" id="11" value="11" /><label for="11" style="width:100px;">2nd Grade</label>
    <input type="radio" name="grade" id="12" value="12" /><label for="12" style="width:100px;">1st Grade</label><br/>
    <input type="radio" name="grade" id="13" value="13" /><label for="13" style="width:100px;">7 Year Olds</label>
    <input type="radio" name="grade" id="14" value="14" /><label for="14" style="width:100px;">6 Year Olds</label><br/>
    <input type="radio" name="grade" id="15" value="15" /><label for="15" style="width:100px;">5 Year Olds</label>
    <input type="radio" name="grade" id="16" value="16" /><label for="16" style="width:100px;">4 Year Olds</label><br/>
</div>
</form>
<br>
<div>
    <iframe id="iframe" style="margin-left:60px; width:600px; height:200px;"></iframe>
</div>

Do you have any more questions regarding your code? If not, you can mark it solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.