How To Change Iframe source Based On Button State Using Javascript

Question

I am trying to create a series of buttons for a web page that would function like toggle buttons (active/inactive) and would change the source of an iframe based on which combination of buttons are currently selected. So, for example, if I want someone to visualize a product that comes in:

three colors (Red, Green, Blue)

three material types (Metal, Plastic, Glass)

three sizes (Small, Medium, Large)

and I happened to have a separate webpage for each option that I want to show based on the current selections (27 possible combinations in this case), how would I go about doing that? Sorry, I am not very experienced with this, but I am trying to learn.

 //Would I set the initial variables like this? var Red = true; var Blue = false; var Green = false; var Metal = true; var Plastic = false; var Glass = false; var Small = true; var Medium = false; var Large = false; ... //Then set the initial state of each button? (Sorry, not sure what this would look like.) btnRed.active; btnMetal.active; btnSmall.active; ... //Then make a conditional statement to make sure two variables and two button states cannot be true at the same time within each of the three categories? (Again, sorry not sure what some of this code would look like.) if (btnRed.active){ Red = true; Blue = false; Green = false; btnBlue.active = false; btnGreen.active = false; } else if (btnBlue.active){ Red = false; Blue = true; Green = false; btnRed.active = false; btnGreen.active = false; } else if (btnGreen.active){ Red = false; Blue = false; Green = true; btnBlue.active = false; btnRed.active = false; } ... //Then set the iframe source based on the variable combination? if (Red = true && Metal = true && Small = true){ document.getElementById('myIframe').src = "http://somesite.com"; } ... 

Any help is appreciated. Thank you!

Answer 1

I am assuming you are using radio buttons.

$('input[type="radio"]').on("change", setIframe);

var setIframe = function() {
  var url;
  //computation of url
  $('iframe').attr("src", url);
}

Here is the complete working code : Working Code