add a textbox when radio button is clicked ?

[Kulgan]

Hi all,

Is it possible in javascript to add a textbox when the last of three
radiobuttons is clicked ?

thanks !

 

[Kulgan]

What happens if the third is clicked and then the first one is clicked?
Does the textbox
stay or does it go?

If the first or the second radiobutton is clicked the textbox must disapear
again ...

It is easier to hide/show the textbox though.

That would be a great solution, but how to do it ?

thanks!

 

[Tom Cole]

If the first or the second radiobutton is clicked the textbox must disapear
again ...


That would be a great solution, but how to do it ?

thanks!

You can start with this and fine tune as necessary:

<script type="text/javascript">
function checkIt(el) {
if (el.value == "other") {
document.getElementById('text').style.display = "block";
}
else {
document.getElementById('text').style.display = "none";
document.getElementById('who').value = '';
}
}
</script>

<input type="radio" name="radio" value="one"
onclick="checkIt(this);">One
<input type="radio" name="radio" value="two"
onclick="checkIt(this);">Two
<input type="radio" name="radio" value="other"
onclick="checkIt(this);">Other <br>
<div id="text" style="display:none;">Other: <input type="text"
id="who"/></div>

This puts the textfield in a hidden div. If one or two is checked, the
textbox is hidden and it's value is reset (so you don't accidently
submit a value, you could always change this behaviour as your server
side should be checking the value of "radio" for "other" before it
attempts to process a "who" value). If other is checked, the textfield
is displayed.

HTH.

 

[-Lost]

You can start with this and fine tune as necessary:

<script type="text/javascript">
function checkIt(el) {
if (el.value == "other") {
document.getElementById('text').style.display = "block";
}
else {
document.getElementById('text').style.display = "none";
document.getElementById('who').value = '';
}
}
</script>

<input type="radio" name="radio" value="one"
onclick="checkIt(this);">One
<input type="radio" name="radio" value="two"
onclick="checkIt(this);">Two
<input type="radio" name="radio" value="other"
onclick="checkIt(this);">Other <br>
<div id="text" style="display:none;">Other: <input type="text"
id="who"/></div>

This puts the textfield in a hidden div. If one or two is checked, the
textbox is hidden and it's value is reset (so you don't accidently
submit a value, you could always change this behaviour as your server
side should be checking the value of "radio" for "other" before it
attempts to process a "who" value). If other is checked, the textfield
is displayed.

I think you put a little too much into that example. It is far more appropriate to use
the native collections that exist via JavaScript. Hence my example:

/* CSS */

form input[name="text1"]
{
display: none;
}

/* SCRIPT */

<script type="text/javascript">
function checkIt(el) {
if (el.value == "other") {
document.forms['form1'].elements['text1'].style.display = "block";
}
else {
document.forms['form1'].elements['text1'].style.display = "none";
document.forms['form1'].elements['text1'].value = '';
}
}
</script>

/* MARKUP */

<form name="form1">
<input type="radio" name="radio" value="one" onclick="checkIt(this);">One
<input type="radio" name="radio" value="two" onclick="checkIt(this);">Two
<input type="radio" name="radio" value="other" onclick="checkIt(this);">Other<br>
<input type="text" name="text1" />
</form>

Basically all I did was replace your getElementByIds with the form collection.

Also, Internet Explorer may not like my use of attribute selectors. That can be solved by
using a class or inline style.

-Lost

 

[Kulgan]

Hi all,

Thanks for your answers !

I found an easy way to do this:

Here's the script that I used:
#######################################################
<script type="text/javascript">
function Show( elemID )
{
var elem = document.getElementById( elemID );

elem.style.position = 'relative';
elem.style.left = '0px';
}

function Hide( elemID )
{
var elem = document.getElementById( elemID );

elem.style.position = 'absolute';
elem.style.left = '-4000px';
}
##########################################################

In combination with this html / css it's working fine :
##########################################################
<tr class="even-row" align="center" id="Q2T8">
<td><input type="radio" name="Q2_A_8" value="1" id="Q2_A_8_1"
onclick="Hide('extraQ')"/></td>
<td><input type="radio" name="Q2_A_8" value="2" id="Q2_A_8_2"
onclick="Hide('extraQ')"/></td>
<td><input type="radio" name="Q2_A_8" value="3" id="Q2_A_8_3"
onclick="Show('extraQ')"/></td>
<td><input type="radio" name="Q2_A_8" value="4" id="Q2_A_8_4"
onclick="Show('extraQ')"/></td>
</tr>

<tr id="extraQ" class="extraquestion">
<td colspan="5">
<br><b>Here's the textbox !</b><br>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent venenatis mollis leo. Aliquam eget
justo. Mauris quis tellus in urna imperdiet convallis. Quisque vel dolor et
risus dictum consequat. Nullam porttitor pretium elit.
<textarea name="Q10" rows="3" cols="75" wrap="virtual"></textarea><br><br>
<td>
</tr>
#########################################################

thanks !