Display a different div based on the combination of two different options

Question

OK, so I am trying to display a different iFrame (in a div) based on the selection of two different options. The first option is BOYS or GIRLS, and the second option is GRADE LEVEL. With 1st-12th, that would be 24 total divs.

Upon load, I'd want the BOYS option and 12th Grade option chosen and the corresponding div displaying that particular iframe. The following code is merely my attempt to display how I want the sidebar of choices to look. Functionally, I'm not sure if much of it applies.

Thank you for any help you're willing and able to provide. I've been searching a few hours a day over the past few days with no luck.

<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>

Answer 1

Answer & Demo

If I understood correctly you want to display a different iframe url for each radio combination. So that's what I did in this JSFiddle , although abstracted and with less, much less content (you should be able to expand on it).

HTML

<form>
    <h1>Gender:</h1>
    <input type="radio" name="gender" value="boys" checked/>Boys<br/>
    <input type="radio" name="gender" value="girls"/>Girls<br/>
    <h1>Grades:</h1>
    <input type="radio" name="grade" value="1" checked/>1st Grade<br/>
    <input type="radio" name="grade" value="2" />2nd Grade<br/>
    <input type="radio" name="grade" value="3" />3rd Grade<br/>
</form>
<br>
<div>
    <iframe id="iframe"></iframe>
</div>

It's pretty straight forward, although I think you messed up with the radio's name attribute there. The name is what defines the group of radious together, naming a radio: "radio" would be redundant :)

JavaScript

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.boysgrade1.com";
                    break;
                case "2":
                    url = "http://www.boysgrade2.com";
                    break;
                case "3":
                    url = "http://www.boysgrade3.com";
                    break;
            }
            break;
        case "girls":
            switch(grade){
                case "1":
                    url = "http://www.girlsgrade1.com";
                    break;
                case "2":
                    url = "http://www.girlsgrade2.com";
                    break;
                case "3":
                    url = "http://www.girlsgrade3.com";
                    break;
            }
            break;
    }
    iframe.src = url;
}

Explanation

I'm a little tired (3 am) so I'll make it quick, basicly all the magic happens in the updateIframeSrc() function, which is called when the page loads, and then every time an input radio changes.

First, using css query selectors, we get the gender value from an input with name=gender that is checked .

Then, we get the grade value from an input with name=grade that is checked .

Since you want a custom url for each combination, I'm afraid it's going to be tedious, and you'll have to use the switch syntax.

To later add a grade, you should append a new case to the corresponding switch:

switch(gender){
    (..)
    case "girls":
        switch(grade){
            (..)
            case "graduated":
                url = "http://graduatedstudents.com";
                break;
        }
        break;
}

And don't forget to add the corresponding html syntax!

<input type="radio" name="grade" value="graduated" />Graduated Student<br/>

Hopes this helps! I'm going to sleep, see you :)

Updates

• Updated code to call updateIframeSrc() on input radio change. ( 3:29a.m 31/12/2014 )
• Updated code to assign a custom iframe src url for each input radio combination. ( 3:58a.m 31/12/14 )