Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

enable/disable text field using radio buttons

Posted on 2005-05-12
12
Medium Priority
?
445 Views
Last Modified: 2008-01-09
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
0
Comment
Question by:mgcIT
  • 7
  • 5
12 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 13987493
<!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
 
LVL 18

Author Comment

by:mgcIT
ID: 13987500
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
 
LVL 25

Accepted Solution

by:
archrajan earned 1000 total points
ID: 13987603
<!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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 18

Author Comment

by:mgcIT
ID: 13988617
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13990190
u have  onclick"doit()"
it shud be

 onclick= "doit()"
0
 
LVL 18

Author Comment

by:mgcIT
ID: 13990612
AHHHHHHHHHHHHHHHHHHHHHHH.....can't believe it was so simple..

Thank you so much for your help!
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13990627
u r welcome...thanks for the points and the grade
0
 
LVL 18

Author Comment

by:mgcIT
ID: 13991491
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13991548
Havin a look
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13991565
Here u go:

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

Author Comment

by:mgcIT
ID: 13992040
perfect...thanks again
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13992178
u r welcome once again
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question