PDA

View Full Version : Radio Buttons, onchange - change text



a4udi
Jan 16th, 2009, 07:56 PM
Does anyone have an example of a script where there is variable text based on input selected from radio buttons?

I would like some buttons like this
() option 1
() option 2
() option 3

Now based on selection (on change of state) it will say on the same page, you have selected OPTION 1 which is RED.
or maybe.... you have selected OPTION 2 which is BLUE. etc

sh0wtym3
Jan 16th, 2009, 08:21 PM
You will need to add some Javascript. I came up with the following to get you started:


<!-- Button 1 -->
<input type="radio" onclick="javascript:show('button1');return false;"> Red
<br>

<!-- On Button 1 Click Show This -->
<div id="button1" style="display: none">
You have selected OPTION 1 which is <font color="#FF0000">RED</font>
</div>
<br><br>

<!-- Button 2 -->
<input type="radio" onclick="javascript:show('button2');return false;"> Blue
<br>

<!-- On Button 2 Click Show This -->
<div id="button2" style="display: none">
You have selected OPTION 2 which is <font color="#0000FF">BLUE</font>
</div>
<br><br>

<!-- Button 3 -->
<input type="radio" onclick="javascript:show('button3');return false;"> Green
<br>

<!-- On Button 3 Click Show This -->
<div id="button3" style="display: none">
You have selected OPTION 3 which is <font color="#00FF00">GREEN</font>
</div>

<script type="text/javascript">
function show(id)
{
el = document.getElementById(id);
if (el.style.display == 'none')
{
el.style.display = '';
el = document.getElementById('more' + id);
el.innerHTML = 'less...';
} else {
el.style.display = 'none';
el = document.getElementById('more' + id);
el.innerHTML = 'more...';
}
}
</script>

Just paste it in between your <body> elements. Hope this helps.

a4udi
Jan 16th, 2009, 10:33 PM
Thanks!
I'm looking for the text at the bottom to stay the same though, I just need to find some sort of javascript example to change two pieces of text when the radio button selected changes.

so:
( ) option 1
( ) option 2
( ) option 3

This text stays the same exept for Variable1 and then Variable2.

so if 1 was selected, it would go:

(*) option 1
( ) option 2
( ) option 3

This text stays the same exept for OPTION 1 and then RED

The Javascript is actually what I'm having the problems with, I don't really know how to do it... I figure I need some sort of "onChange" and then change a span value based on the radio button selected?