asked on

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

archrajan

<!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>

mgcIT

ASKER

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

ASKER CERTIFIED SOLUTION

archrajan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mgcIT

ASKER

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"> </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!

archrajan

u have onclick"doit()"
it shud be

onclick= "doit()"

mgcIT

ASKER

AHHHHHHHHHHHHHHHHHHHHHHH.....can't believe it was so simple..

Thank you so much for your help!

archrajan

u r welcome...thanks for the points and the grade

mgcIT

ASKER

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')">

archrajan

Havin a look

archrajan

Here u go:

if(document.form1.elements['Q6'+row+'1'][0].checked == true)

mgcIT

ASKER

perfect...thanks again

archrajan

u r welcome once again