Multiple drop down lists, how to target iframe with jpeg.

Question

Once I have chosen the multiple options, I want target an iframe within the page with a jpeg. This jpeg will be different depending on the chosen answers.
I hope that makes sense.
I have the drop down lists, and the iframe set up, but I don't know how to use java well enough. Do I use the submit button to somehow trigger a function in javascript? if so how?
I am very new to this, I may be way off. :)

Answer 1

Check the link below: I have just a little improve what I suggested, to make you an example...
It's not very hard, you have to handle only few things. You will necessarly success ;) And you can easily add some functionnalities, styling enhancement progressively ^^

https://code.sololearn.com/WY02MBh5davY/#html

Answer 2

Paste ( and study ;) ) this code in the JS tab ( or somewhere linked to your html ):

window.addEventListener('load', function main() {
var selects = document.getElementsByTagName('select');
var iframe = document.getElementsByTagName('iframe')[0];
iframe = iframe.contentWindow.document || iframe.contentWindow;
var i = selects.length;
while (i--)
selects[i].addEventListener('change',refresh);
function refresh() {
var i = selects.length;
var r = {};
while (i--)
r[selects[i].id] = selects[i][selects[i].selectedIndex].value;
log(r);
}
function log(o) {
var s = [];
for (var k in o)
s.push(k+': '+o[k]);
s = '{ '+s.join(', ')+' }';
iframe.write(s);
// console.log(s);
}
});

Feel free to ask for some explanation ^^

Answer 3

Using <iframe> for that purpose is too much heavy for nothing ^^
Just target an <img> element instead, or even whatever element styled with a css background image...

<select onchange="setimg(this);">
<option value="image.url">image 1</option>
<option value="image.url">image 1</option>
<option value="image.url">image 1</option>
</select>
<img id="out">

function setimg(o) {
document.getElementById("out").src = o.options[o.selectedIndex].value;
}

[ edit ]
For the second way, through css, you need to target the style property of element, whatever with inlined css ( 'style' property ), or using classes facilities, by using the 'className' property... each with its correct syntax rules applied, obviously :P

Answer 4

Thank you visph.
I will have to play around with that code, to get exactly what you mean, but I appreciate your help.
I am seriously addicted to this coding, I only wanted to show the kids that it could be done by anyone, now I have been up for days.
I should have started with something easier. lol

Answer 5

Hi visph, thank you for your response.
I understand what you mean now.
What I had in mind was similar, but with more options before load in the image.

I have had a go at doing it myself, with your help, but have no idea how I can link all the options to one image when I press ok, have a look at my attempt and you will see what I mean hopefully.

https://code.sololearn.com/W8Bn1loWFHV7/#html

Answer 6

Holy-Macaroni, ok.
That might take some studying, but I will give it a go.
I will be in touch. :)
Thank you visph.

Answer 7

Hi visph
I will have to come back to this project when I know more js, it is really confusing me.
Thanks for your help.