I need to change a picture when the user clicks a radio button. There are mutiple groups of radio buttons (name="var0", name="var1", etc.) and multiple values per button. The picture I want it to load depends on the combination selected. I would really like to do this in one line.
I have this working with dropdowns using onchange="javascript:MyIma
I'm looking for onclick="javascript:MyImag
If this is not possible (I sure hope it is), then please provide me with the function that I can call from the onclick.
Thanks for your help.
-Ryan
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
No good. Here is my javascript:
name="Var0" value="N" onclick="javascript:docume
Here is the pic it loads:
db/pics/BB_undefined.pic
BB_N.pic is what I am trying to load.
(Note: I do realize that that in the above case I could could just make the onclick = BB_N.pic, but if I have multiple Var? radio button groups, I will need javascript to read the state of the other Var? values)
Here's an example of what I think you are trying to do. I've tested it in IE6 and NS7. As you can see I access the radio button using its id.
<form name="fmRadios">
<input type="radio" id="Var0" name="Var0" value="N" onClick="javascript:docume
<input type="radio" id="Var0" name="Var0" value="M" onClick="javascript:docume
<input type="radio" id="Var0" name="Var0" value="P" onClick="javascript:docume
<br />
<input type="radio" id="Var1" name="Var1" value="N" onClick="javascript:docume
<input type="radio" id="Var1" name="Var1" value="M" onClick="javascript:docume
<input type="radio" id="Var1" name="Var1" value="P" onClick="javascript:docume
</form>
We are much closer. Here are the 3 radio buttons I have:
<input type="radio" name="Var0" value="N" onclick="javascript:docume
<input type="radio" name="Var0" value="G" onclick="javascript:docume
<input type="radio" name="Var0" value="B" onclick="javascript:docume
Unfortunatly, no matter which one I click, it tries to load BB_N.pic (the G and the B do not work).
Do I have to use This.Value when clicking a button of the group? I suppose I will add the second picture variance and see if your exact code works. Strang that my above code didn't though.
(BTW: Thanks a ton for your help so far woodpd.)
Try this mate, it worked for me. I think we needed to find out which one was checked before retrieveing the value. It seems that Var1.value only gets the value of the first radio rather than the checked on. That's why this.value worked but not Var1.value
<html>
<head>
<title>Stuggling with iframe</title>
<script>
function loadImage() {
var rad0val, rad1val
for (var i=0; i<3; i++) {
if (document.forms['myform'].
if (document.forms['myform'].
}
document.DetailsPic.src='d
}
</script>
</head>
<body>
<form id="myform">
<input type="radio" name="Var0" id="Var0" value="N" onclick="loadImage();" checked="checked">
<input type="radio" name="Var0" id="Var0" value="G" onclick="loadImage();">
<input type="radio" name="Var0" id="Var0" value="B" onclick="loadImage();">
<br />
<input type="radio" name="Var1" id="Var1" value="N" onclick="loadImage();" checked="checked">
<input type="radio" name="Var1" id="Var1" value="G" onclick="loadImage();">
<input type="radio" name="Var1" id="Var1" value="B" onclick="loadImage();">
</form>
<img name="DetailsPic" id="DetailsPic" src="db/pics/BB_NN.pic" width="100" height="100" alt="pic" />
</body>
</html>
We are much closer. Here are the 3 radio buttons I have:
<input type="radio" name="Var0" value="N" onclick="javascript:docume
<input type="radio" name="Var0" value="G" onclick="javascript:docume
<input type="radio" name="Var0" value="B" onclick="javascript:docume
Unfortunatly, no matter which one I click, it tries to load BB_N.pic (the G and the B do not work).
Do I have to use This.Value when clicking a button of the group? I suppose I will add the second picture variance and see if your exact code works. Strang that my above code didn't though.
(BTW: Thanks a ton for your help so far woodpd.)
No, I didn't see that last night when I posted (I did reload the page before posting @ 9:43 too... strange). I will try that tonight. I'm pretty sure that will work. I alrady had something similar to that off a google search of ExpertsExchange, but I will gladly award you points for all your help (once I test it). So I am assuming that it is impossible to do it in one line I guess. Could I put that whole function in one simi-colon delimited line? The problem is that I create the page through a CGI and it's kinda difficult to write javascript functions at the top of the page IFF I am showing an item that uses "OnClickVarPicRadio" (my function that creates the radio button code).
Is it possible to write the <script> section on the bottom (or even better, right before/after the radio buttons), or does it have to go on the top?
To get it happening on one line, all you need to do is compress that function into one line. However, you'd have to repeat it for each radio button. It wouldn't be very good style and be quite inefficient.
However, what you were saying about putting the function there if and only if you had the radios there is not really an issue. You may as well put the JavaScript there anyway as it won't interfere with your page if the radios aren't there (it's in a function that has to be called, ther's no loose JavaScript)
You can normally put the script section where you like, but stylistically it is better in the head section (I think it might even be part of some standards - I can't remember though)
To check whether the picture exists, I suppose that you need to ascertain whether or not the file exists which would normally be a server-side task. However, there may be a way to check whether an image has loaded or not although I'm afraid I know not of such a method.
If you give your radio boxes both initial checks and the image an intial value though you should have control over what images are being displayed.
Business Accounts
Answer for Membership
by: woodpdPosted on 2003-04-11 at 22:01:43ID: 8317364
Use Var0.value instead of Var0[Var0.selectedindex].v