PDA

Click to See Complete Forum and Search --> : Displaying images on selected radio button

djeet
06-10-2006, 12:53 AM
HI,
I have a form.
<form name="f">
It has 3 radio btns.
<input type=radio value=red>Red
<input type=radio value=blue>Blue
<input type=radio value=pink>Pink

What I want is that when the user selects any btn like say pink, a new window pops up showing a pink img, and likewise for the other 2 btns.
The page which has the form should remain as it is. thus, I have put no action.
What code should I apply?
shane.carr
06-10-2006, 03:06 AM
(tested)


<script>
<!--
function a(color) {
window.open(color+"img.png", "My "+color+" Picture") //or whatever file name you have
}
// -->
</script>
<html><body>
<form name="f">
<input type="radio" name="radioset" value="red" onclick="a('red');">Red</input>
<input type="radio" name="radioset" value="blue" onclick="a('blue');">Blue</input>
<input type="radio" name="radioset" value="pink" onclick="a('pink');">Pink</input>
</form>
</body></html>


Hope that helps
djeet
06-10-2006, 04:21 AM
well, it works when I write : window.alert
It shows the image name to be displayed but window.open doesn't work.Pls help.
shane.carr
06-10-2006, 04:40 PM
Try this (http://homepage.mac.com/shane.f.carr/testera.html). It works for me. Take a look at the source code if you like.

There is the main html, and three pictures, called blueimg.png, pinkimg.png and redimg.png. Each of the pictures is a small rectangle filled with the color.
netbuddy
06-10-2006, 07:46 PM
try to use the

onChange="a(this.value);"

instead of

onclick="a('red');"> etc...
shane.carr
06-10-2006, 07:55 PM
try to use

onChange="a(this.value);"


That doesn't work for me
netbuddy
06-11-2006, 09:35 AM
Stupid question, why are you using radio buttons for triggering a window open? You would be better to use the button inputs or hyper links as your onClick event will function.
shane.carr
06-11-2006, 03:26 PM
why are you using radio buttons for triggering a window open
There are reasons that someone might want to use a radio button to activate javascript code. For example, in a form, you might have a code


<input type="radio" name="radio" onclick="confirm('Are you sure?')">Hello, World!</input>


in a radio button that you might want someone to double-check before they click it. There might be a valid reason for a radio box selection that opens a window. Djeet, adding onto netbuddy's post, you could always use the code

<script language="javascript" type="text/javascript">
<!--
function a() {
var box = ""
var i = 0
while(i < document.f.radioset.length) {
if (document.f.radioset[i].checked) {
box = document.f.radioset[i].value;
}
i++
}
window.open(box+"img.png", "My "+box+" Picture") //or whatever file name you have
}
// -->
</script>
<html><body>
<form name="f">
<input type="radio" name="radioset" value="red">Red</input>
<input type="radio" name="radioset" value="blue">Blue</input>
<input type="radio" name="radioset" value="pink">Pink</input>
<input type="button" onclick="a();" value="Open Window" />
</form>
</body></html>

to do what you're trying to do.
djeet
06-13-2006, 02:18 AM
Thanks for the answer. But, I am still stuck. Shane Carr special thanks 2 U since U understood my need for this code. I am new to JS; used the last code U gave but it's not working; when I click 'open win.'-- explorer after 3 minutes alerts: script taking too long ; wanna abort...? what 2 do?
shane.carr
06-13-2006, 07:34 PM
Oops! Error on my part! Sooooo sorry! :( Replace while(i < document.f.radioset.length) {
if (document.f.radioset[i].checked) {
box = document.f.radioset[i].value;
}
} with while(i < document.f.radioset.length) {
if (document.f.radioset[i].checked) {
box = document.f.radioset[i].value;
}
i++ //it asked you to abort because the variable consistently was the same, causing a never-ending cycle
}. That should fix your problem for now. Also, make sure that you have javascript enabled.



I recommend activating this code in a different html:


<script type="text/javascript" language="javascript">
function a(){
alert("This code worked!")
}
</script>
<html><body onload="a();"></body></html>


If a window opens with a message, then the code works fine. But, if you see the contents of the script tag in your document, javascript is not enabled.


Also, make sure that you have the files "blueimg.png", "redimg.png" and "pinkimg.png" created in the same directory as the html.


Again, I am soooooooooo sorry for the bad code. I apologize. :o
djeet
06-14-2006, 05:01 AM
Thanks so much. It worked.
And it was so nice of U to tell me how to chk whether or not JS is enabled.