enable/disable text field using radio buttons

I have 3 radio buttons (r1, r2, r3) and one text field (t1).  t1 is set to readonly="true" when the page loads, but when a user selects r1, I want to set readonly="false".  t1 must be set back to readonly="true" when r2 or r3 is selected.

How can I accomplish this?

Thanks
LVL 18
mgcITAsked:
Who is Participating?
 
archrajanCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function doit()
{
if(document.forms[0].r1[0].checked == true)
document.getElementById('t1').readOnly = false;
else
document.getElementById('t1').readOnly = true;
}
</script>

</HEAD>

<BODY>
<form>
<input type = "radio" name = "r1" value = "1" onclick = "doit()" >
<input type = "radio" name = "r1" value = "2" onclick = "doit()" >
<input type = "radio" name = "r1" value = "3" onclick = "doit()" >
<input type ="text" readonly id = "t1">
</form>
</BODY>
</HTML>
0
 
archrajanCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function doit()
{
if(document.getElementById('r1').checked == true)
document.getElementById('t1').readOnly = false;
else
document.getElementById('t1').readOnly = true;
}
</script>

</HEAD>

<BODY>
<form>
<input type = "radio" name = "rad" value = "r1" onclick = "doit()" id = "r1">
<input type = "radio" name = "rad" value = "r2" onclick = "doit()" id = "r2">
<input type = "radio" name = "rad" value = "r3" onclick = "doit()" id = "r3">
<input type ="text" readonly id = "t1">
</form>
</BODY>
</HTML>
0
 
mgcITAuthor Commented:
actually, I just realized that all 3 of my radio buttons will be called r1 in order for them to be mutually exclusive.  So change my original question to make the first r1 control enable the text field.  The 2nd & 3rd radio buttons will disable it.

Thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mgcITAuthor Commented:
ok I'm still having trouble with this.  Your code works fine when I paste it into a new file but I can't get mine to work.  Here is my code.  (you'll notice the actual names of the radio buttons are different.  I changed them for this Q because I thought it would be easier but I guess not).  This is also an ASP page but I don't think that should matter.

The radio buttons are actually called Q6a1 and the text field is called Q6a2

..........
..........

<head>
<script>
function doit()
{
if(document.form1.Q6a1[0].checked == true)
document.getElementById('Q6a2').readOnly = false;
else
document.getElementById('Q6a2').readOnly = true;
}
</script>

............
............

<tr>
      <td width="30"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
      <td width="160"><font face="Arial, Helvetica, sans-serif">Setup of workpapers</font></td>
      <td width="110"><font face="Arial, Helvetica, sans-serif">
        <input type="radio" name="Q6a1" class="myradio" value="Hours Saved" onclick"doit()">
        <input name="Q6a2" type="text" id="Q6a2" readonly size="1">
        hrs</font></td>
      <td width="110"><font face="Arial, Helvetica, sans-serif">
        <input type="radio" name="Q6a1" class="myradio" value="Hours Added" onclick"doit()">
        <input name="Q6a4" type="text" id="Q6a4" size="1">
        hrs</font></td>
      <td width="75"><div align="center"><font face="Arial, Helvetica, sans-serif">
          <input type="radio" name="Q6a1" class="myradio" value="No Difference" onclick"doit()">
          </font></div></td>
      <td width="60"><div align="center"><font face="Arial, Helvetica, sans-serif">
          <input type="radio" name="Q6a1" class="myradio" value="N/A" onclick"doit()">
          </font></div></td>
      <td width="150"><input name="Q6a7" type="text" id="Q6a7" size="15" maxlength="255" readonly="true"></td>
      <td><input name="Q6a8" type="text" id="Q6a8" size="49" maxlength="255" readonly="true"></td>
    </tr>
    <tr>


Thanks for your help!
0
 
archrajanCommented:
u have  onclick"doit()"
it shud be

 onclick= "doit()"
0
 
mgcITAuthor Commented:
AHHHHHHHHHHHHHHHHHHHHHHH.....can't believe it was so simple..

Thank you so much for your help!
0
 
archrajanCommented:
u r welcome...thanks for the points and the grade
0
 
mgcITAuthor Commented:
hey archrajan maybe you could help me out one more time?  How would I change this so taht I could pass the row variable to my function.  I have several rows of radio buttons...Q6a1 is row 'a' then I have Q6b1, Q6c1, etc....  If this is not something very simple just let me know and I'll post another question w/ more points.  Thanks

here's what I have so far but it is not right:

function doit(row)
{
if(document.form1.Q6+row+1[0].checked == true)
document.getElementById('Q6+row+2').readOnly = false;
else
document.getElementById('Q6+row+2').readOnly = true;
}

........
........
<input type="radio" name="Q6a1" class="myradio" value="Hours Added" onclick="doit('a')">
0
 
archrajanCommented:
Havin a look
0
 
archrajanCommented:
Here u go:

if(document.form1.elements['Q6'+row+'1'][0].checked == true)
0
 
mgcITAuthor Commented:
perfect...thanks again
0
 
archrajanCommented:
u r welcome once again
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.