Toggle active state of textbox with a radio button

Hatchingabrain · April 2nd, 2005, 11:17 PM

I have 5 radio buttons. A B C D E
B (if selected) needs to activate a text field of 25 chars
E (if selected) needs to activate a text field of 10 chars

if user selects B, then user can type in "happy"; user then changes mind and selects D. "happy" is erased and the textfield is disabled. user then changes mind again and selects B and this time types in "not so happy"; then user changes mind selects E and types in "whatever" (B is blanked and disabled). then user selects A and hits submit. (B and E should be blanked and disabled... form returns value A as submited.

cheap example of using one checkbox to toggle one textbox... blah!

<html><head><title>Toggle My Text Box</title>
<script language="JavaScript">

function textme () {
if(document.f1.mycheckbox.checked)
{
document.f1.textinput.disabled=false;
}
else
{
document.f1.textinput.disabled=true;
}
}
</script>

<form action="" method="" name="f1">
  <input type="text" disabled size="10" name="textinput">
  <input type="checkbox" onclick="textme()" name="mycheckbox" value="on" >
<br>
<input type="submit" value="Add">
  <input type="reset" value="Clear">
  </form>
</body></html>

vinod_yadav1919 · April 4th, 2005, 12:13 AM

Hii Hatchingabrain !!
Hope this will help you

<form name="myform">
<input type=text name="textbox" > <br>
<input type=radio name="rad_btn" value="A" onclick="setInput()">A <br>
<input type=radio name="rad_btn" value="B" onclick="setInput()">B <br>
<input type=radio name="rad_btn" value="C" onclick="setInput()">C <br>
<input type=radio name="rad_btn" value="D" onclick="setInput()">D <br>
<input type=radio name="rad_btn" value="E" onclick="setInput()">E <br>
</form>

<script>

// document.myform.rad_btn[0] checkbox A.
// document.myform.rad_btn[1] checkbox B.
// document.myform.rad_btn[2] checkbox C.
// document.myform.rad_btn[3] checkbox D.
// document.myform.rad_btn[4] checkbox E.

function setInput()
{

if(document.myform.rad_btn[1].checked)
{
document.myform.textbox.disabled=false
document.myform.textbox.size=25

}

if(document.myform.rad_btn[4].checked)
{
document.myform.textbox.disabled=false
document.myform.textbox.size=10
}

if(document.myform.rad_btn[2].checked)
{
document.myform.textbox.value=""
document.myform.textbox.disabled=true;

}

}

</script>

Cheers :)

vinod

Hatchingabrain · April 4th, 2005, 07:13 AM

Great... I would just need:
if(document.myform.rad_btn[/*BTN NUMBER*/].checked)
{
document.myform.textbox.value=""
document.myform.textbox.disabled=true;
}

for EACH of the non text radios....

Thanks :D