JAVASCRIPT DISABLE/ENABLE TEXT BOX INPUT WHEN A RADIO IS SELECTED
The following tutorial and example script shows you how to disable a text input which is only enabled once a
certain specified radio button is checked. See the following demo:
What is your favorite fruit?
In the above example, the text box remains disabled if you select any of the first 4 radio buttons. The textbox
becomes enabled only when the last radio button is selected.
It's done like this:
First we create a form called form1 with a series of radio buttons like below:
<form name="form1" action="#" method="post">
<input type="radio" name="fruit" value="1" >Apples
<input type="radio" name="fruit" value="2" >Oranges
<input type="radio" name="fruit" value="3" >Bananas
<input type="radio" name="fruit" value="4" >Pears
<input type="radio" name="fruit" value="other" >Other...Please specify
<input type="text" name="otherChoice" >
</form>
We then create a function which we will call makeChoice (but you can name it something else) and place an opening
curly bracket { next to it. This function will be placed in between the <head> and </head> tags of your
page.
<script type="text/javascript">
function makeChoice(){
We then initialize a variable val to 0.
var val = 0;
We then open a for loop because we have more than one radio to deal with.
for( i = 0; i < document.form1.fruit.length; i++ ){
document.form1.fruit.length stands for: document is your page. form1 is the name of your form. fruit is the name of
your radios that are in the for loop. length is added at the end to give the number of radio buttons in the loop -
ie. document.form1.fruit.length returns the number of radio buttons in the loop - in this case it would be 4. The
for loop says that for each of the radios in the loop.
We now place the following in the for loop:
if( document.form1.fruit[i].checked == true )
{
val = document.form1.fruit[i].value;
We are saying with the above that if any of the radio buttons in the for loop are checked, val takes on the value
of the radio (document.form1.fruit[i].value returns value of radio button which is assigned to variable val). Then,
using an if statment, we say that if the value of the radio button is equal to other, then the input box
(document.form1.otherChoice.disabled) must not be disabled and it must gain focus
(document.form1.otherChoice.focus();) as below.
if(val=='other')
{
document.form1.otherChoice.disabled=false;
document.form1.otherChoice.focus();
}
We then complete the if statement and say that else the input box must be disabled
(document.form1.otherChoice.disabled=true;). We then close the function.
else
{
document.form1.otherChoice.disabled=true;
}
}
}
}
</script>
The complete script is below.
<script type="text/javascript">
function makeChoice()
{
var val = 0;
for( i = 0; i < document.form1.fruit.length; i++ )
{
if( document.form1.fruit[i].checked == true )
{
val = document.form1.fruit[i].value;
if(val=='other')
{
document.form1.otherChoice.disabled=false;
document.form1.otherChoice.focus();
}
else
{
document.form1.otherChoice.disabled=true;
}
}
}
}
</script>
We then need to adjust our form we have previously created by adding the call to the function. See the red
text.
<form name="form1" action="#" method="post">
<input type="radio" name="fruit" value="1" onclick="makeChoice();">Apples
<input type="radio" name="fruit" value="2" onclick="makeChoice();">Oranges
<input type="radio" name="fruit" value="3" onclick="makeChoice();">Bananas
<input type="radio" name="fruit" value="4" onclick="makeChoice();">Pears
<input type="radio" name="fruit" value="other" >Other...Please specify
<input type="text" name="otherChoice" >
</form>
One last thing we need to do is to ensure the the text box is disabled whenever the page is loaded. We do this by
adding the following code (in red) to the body tag.
<body onload="document.form1.otherChoice.disabled=true">
| 
Home
Computers & Internet
