Dropdown menu onChange event help

[GoldDog]

Hellooo coders,

I've had great experience here before getting questions answered, and I know this is an easy one, so fire away please...

I'm building a form which allows the user to choose from various options, and when an option is chosen a picture is displayed on the drawing board.

I was doing it with an onChange event on radio buttons, but the client would rather see a dropdown menu for the choices. I can't seem to get the onChange event to work for the menu.

Here's the code I've been working with for the radio buttons:


var sf = new Image();
var gr = new Image();
var hd = new Image();
sf.src = "sf.gif";
gr.src = "gr.gif";
hd.src = "hd.gif";
function doStyle(styleimage) {
eval("document['style'].src = " + styleimage + ".src");
}


<form>
<input type="Radio" name="style" value="sf" onclick="doStyle('sf')"> San Francisco<br>
<input type="Radio" name="style" value="gr" onclick="doStyle('gr')"> Grand Rapids<br>
<input type="Radio" name="style" value="hd" onclick="doStyle('hd')"> Half Dollar
</form>

<img name="style" src="blank.gif">

That works great, but how do I switch this radio button set of options to a <select> menu? I thought to use onChange, but that does nothing.

Any help is greatly appreciated,
Carter

[JackTheTripper]

<script>

var sf = new Image();
var gr = new Image();
var hd = new Image();
sf.src = "sf.gif";
gr.src = "gr.gif";
hd.src = "hd.gif";

function doStyle(daForm) {
eval("document['style'].src = " + eval("daForm.options[daForm.selectedIndex].value") + ".src");
}

</script>

<form name="form1">
<select name="switch" onChange="doStyle(this)" class="bodyMain">
<option selected>- Pick an Image - </option>
<option value="sf">san fran</option>
<option value="gr">grand raps</option>
<option value="hd">half dollar</option>

</select>
</form>

<img src="firstImage.gif" name= "style">

[GoldDog]

Now here's another question:

Based on the new choices the user makes, I want to present different radio button options below those choices. So if the user chooses option 'A' the currently displayed set of radio buttons are displayed, but if they change to option 'B', a different set will be displayed. Actually, it's only the values of those radio buttons that need to change, not the text associated with them.

thanks again,
Carter

[JackTheTripper]

How many different sets of radios are you looking at? If it's only a few I might suggest using the style:display and style:block properties of CSS. But I only know how to get this working flawlessly in IE 5+ and Nutscrape 6+. Wouldn't work with Nutscrape 4.7.

[GoldDog]

For that matter I'm only really concerned about Nerdscape 7, and then not very!

There are 6 radio buttons, and they would be changed out for an alternate 6.

[JackTheTripper]

No prob, here ya go. sorry it took a while...


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`


<script>


var sf = new Image();
var gr = new Image();
var hd = new Image();
sf.src = "sf.gif";
gr.src = "gr.gif";
hd.src = "hd.gif";



function doStyle(daForm) {
eval("document['style'].src = " + eval("daForm.options[daForm.selectedIndex].value") + ".src");

whichPic = eval("daForm.options[daForm.selectedIndex].value")

if (whichPic == 'sf' || whichPic == 'gr') { // if whichPic = sf OR whichPic = gr
document.getElementById('radioSet2').style.display = "block"
document.getElementById('radioSet1').style.display = "none"
}

if (whichPic == 'hd') {
document.getElementById('radioSet1').style.display = "block"
document.getElementById('radioSet2').style.display = "none"
}



}

</script>







<form name="form1">
<select name="switch" onChange="doStyle(this)" class="bodyMain">
<option selected>- Shortcuts - </option>
<option value="sf" onChange= "alert('beep')">san fran</option>
<option value="gr">grand raps</option>
<option value="hd">half dollar</option>

</select>
</form>

<img src="firstImage.gif" name= "style">


<div id= "radioSet1" style= "display: block;">
<font color= red><b>Radio Set 1</b><br><br>
radio1<br>
radio2<br>
radio3<br>
etc...</font>

</div>



<div id= "radioSet2" style="display: none;">
<font color= blue><b>Radio Set 2</b><br><br>
radio7<br>
radio8<br>
radio9<br>
etc...</font>

</div>


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


If you have any q's let me know.

[GoldDog]

The options which force the change will actually be initiated by some other radio buttons, and not that dropdown menu. So the line:

whichPic = eval("daForm.options[daForm.selectedIndex].value")

...would actually be looking for values sent from the radio buttons. I assume this is the only line I would have to change, right?

[JackTheTripper]

So wait, I'm confused... Which is choosing what image is displayed? The drop down or the radios.

If I understand it seems you want the dropdown to choose which set of radios is displayed, then you want the radios to decide which image is displayed. Is this correct?

[GoldDog]

Nope. Sorry, I was unclear. The drop down displays the images, and that works great. That works independently of the radios, and will not change.

There is another radio option on this form that will change other radio options within the form. Sorry, I was mixing my apples and oranges.

[JackTheTripper]

So you've got some radio's (Group A) And you want them to display or hide other sets of radios (Group B, Group C, etc...) depending on what's checked? Is this right?


In that case it's kind of a mix between your first script and mine. Lemme work on it.

[GoldDog]

Jack, if you send me a message I'll send you the url for this thing. I don't really want to post it here.

[JackTheTripper]

Try this...

www.bobx3.com/GoldDog


*edit* You're e-mail is bouncing back.