p2p.wrox.com: Archives - javascript

javascript_howto thread: SV: Re: SV: Re: How to make columns READONLY dynamically ?
Message #1 by "Robert Nyman" <robert.nyman@c...> on Wed, 6 Nov 2002 09:48:24 +0100
Hi Abhijeet,

Yes, just replace the checkboxes with radio buttons in the HTML code.
Same logic.


/Robert


-----Ursprungligt meddelande-----
Fr=E5n: Abhijeet Kenjale [mailto:akenjale@f...]
Skickat: den 5 november 2002 23:41
Till: JavaScript HowTo
=C4mne: [javascript_howto] Re: SV: Re: How to make columns READONLY
dynamically ?


Thanx Robert,

That solved my prob.

But a question......

Let's say I'm using RadioButton instead of CheckBox. And all those
RadioButton have same name so now I can check only one button at a time.

So whenever I'll check any RadioButton, if I want to make enable that
row only and other rows disable. How can I do that ? In this case can I
use the same logic u gave which work for CheckBox.

~Abhijeet


----- Original Message -----
From: "Robert Nyman" <robert.nyman@c...>
To: "JavaScript HowTo" <javascript_howto@p...>
Sent: Tuesday, November 05, 2002 10:33 AM
Subject: [javascript_howto] SV: Re: How to make columns READONLY
dynamically ?


Keith, what the hell are you talking about...   ;-)

Abhijeet, this is a solution that will work for you (just a note: in
your HTML code, there were several input items that had the same ID. IDs
are supposed to be unique for every element).

But if I were you, I'd rather use the disabled property than the
readOnly property, because then it's easier for the user to understand.

First, the disabled example, then the readOnly example. Here's the code:

DISABLED EXAMPLE:

JavaScript:

function fnCheck(oCheckBox, intIndexRow){
var bEditable =3D (oCheckBox.checked)? false : true;
    var oForm =3D document.forms["frmTest"]; oForm.elements["empNo" +
intIndexRow].disabled =3D bEditable; oForm.elements["firstName" +
intIndexRow].disabled =3D bEditable; oForm.elements["lastName" +
intIndexRow].disabled =3D bEditable;
    }

HTML:


<form name=3D"frmTest">
<table>
<tr>
<td></td>
<td>Emp No</td>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td><input type=3D"checkbox" name=3D"checkBox1" onClick=3D"fnCheck(this,
1)"></td> <td><input type=3D"text" name=3D"empNo1" value=3D"1"
disabled></td>
<td><input type=3D"text" name=3D"firstName1"
value=3D"Scott" disabled></td>
<td><input type=3D"text" name=3D"lastName1"
value=3D"Tiger" disabled></td>
</tr>
<tr>
<td><input type=3D"checkbox" name=3D"checkBox1" onClick=3D"fnCheck(this,
2)"></td> <td><input type=3D"text" name=3D"empNo2" value=3D"2"
disabled></td>
<td><input type=3D"text" name=3D"firstName2"
value=3D"Sys" disabled></td>
<td><input type=3D"text" name=3D"lastName2"
value=3D"Manager" disabled></td>
</tr>
<tr>
<td><input type=3D"checkbox" name=3D"checkBox3" onClick=3D"fnCheck(this,
3)"></td> <td><input type=3D"text" name=3D"empNo3" value=3D"3"
disabled></td>
<td><input type=3D"text" name=3D"firstName3"
value=3D"Robert" disabled></td>
<td><input type=3D"text" name=3D"lastName3"
value=3D"Smith" disabled></td>
</tr>
</table>
</form>


READONLY EXAMPLE:

JavaScript:

function fnCheck(oCheckBox, intIndexRow){
var bEditable =3D (oCheckBox.checked)? false : true;
    var oForm =3D document.forms["frmTest"]; oForm.elements["empNo" +
intIndexRow].readOnly =3D bEditable; oForm.elements["firstName" +
intIndexRow].readOnly =3D bEditable; oForm.elements["lastName" +
intIndexRow].readOnly =3D bEditable;
    }

HTML:


<form name=3D"frmTest">
<table>
<tr>
<td></td>
<td>Emp No</td>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td><input type=3D"checkbox" name=3D"checkBox1" onClick=3D"fnCheck(this,
1)"></td> <td><input type=3D"text" name=3D"empNo1" value=3D"1"
readonly></td>
<td><input type=3D"text" name=3D"firstName1"
value=3D"Scott" readonly></td>
<td><input type=3D"text" name=3D"lastName1"
value=3D"Tiger" readonly></td>
</tr>
<tr>
<td><input type=3D"checkbox" name=3D"checkBox1" onClick=3D"fnCheck(this,
2)"></td> <td><input type=3D"text" name=3D"empNo2" value=3D"2"
readonly></td>
<td><input type=3D"text" name=3D"firstName2"
value=3D"Sys" readonly></td>
<td><input type=3D"text" name=3D"lastName2"
value=3D"Manager" readonly></td>
</tr>
<tr>
<td><input type=3D"checkbox" name=3D"checkBox3" onClick=3D"fnCheck(this,
3)"></td> <td><input type=3D"text" name=3D"empNo3" value=3D"3"
readonly></td>
<td><input type=3D"text" name=3D"firstName3"
value=3D"Robert" readonly></td>
<td><input type=3D"text" name=3D"lastName3"
value=3D"Smith" readonly></td>
</tr>
</table>
</form>


/Robert


-----Ursprungligt meddelande-----
Fr=E5n: Abhijeet Kenjale [mailto:akenjale@f...]
Skickat: den 5 november 2002 20:15
Till: JavaScript HowTo
=C4mne: [javascript_howto] Re: How to make columns READONLY dynamically 
?


I'm not using access.
I just want to make those fields editable in my HTML page.

Following is my HTML code.....



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>
<HEAD> <TITLE> Dynamic Readonly </TITLE> <META NAME=3D"Generator"
CONTENT=3D"EditPlus"> <META NAME=3D"Author" CONTENT=3D""> <META
NAME=3D"Keywords" CONTENT=3D""> <META NAME=3D"Description" CONTENT=3D"">

<SCRIPT language=3D"javascript">

function fnCheck()
{
 alert("In function");

 return true;
}

</SCRIPT>

</HEAD>

<BODY>

<CENTER>

<FORM name=3D"frmTest" >

<TABLE>
<TR>
 <TD></TD>
 <TD>Emp No</TD>
 <TD>First Name</TD>
 <TD>Last Name</TD>
</TR>
<TR>
 <TD><INPUT id=3D"1" TYPE=3D"checkbox" NAME=3D"" 
onClick=3D"fnCheck()"></TD>
<TD><INPUT id=3D"1" TYPE=3D"text" NAME=3D"" value=3D"1" READONLY></TD>
<TD><INPUT id=3D"1" TYPE=3D"text" NAME=3D"" value=3D"Scott" 
READONLY></TD>
<TD><INPUT id=3D"1" TYPE=3D"text" NAME=3D"" value=3D"Tiger" 
READONLY></TD> </TR>
<TR>  <TD><INPUT id=3D"2" TYPE=3D"checkbox" NAME=3D"" ></TD>  <TD><INPUT
id=3D"2" TYPE=3D"text" NAME=3D"" value=3D"2" READONLY></TD>  <TD><INPUT 
id=3D"2"
TYPE=3D"text" NAME=3D"" value=3D"Sys" READONLY></TD>  <TD><INPUT 
id=3D"2"
TYPE=3D"text" NAME=3D"" value=3D"Manager" READONLY></TD> </TR> <TR> 
<TD><INPUT
id=3D"3" TYPE=3D"checkbox" NAME=3D"" ></TD>  <TD><INPUT id=3D"3" 
TYPE=3D"text"
NAME=3D"" value=3D"3" READONLY></TD>  <TD><INPUT id=3D"3" TYPE=3D"text" 
NAME=3D""
value=3D"Robert" READONLY></TD>  <TD><INPUT id=3D"3" TYPE=3D"text" 
NAME=3D""
value=3D"Smith" READONLY></TD> </TR> </TABLE>

</FORM>

</CENTER>

</BODY>
</HTML>





---

Improve your web design skills with these new books from Glasshaus.

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3Dnosim/theprogramm
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3Dnosim/theprogramm
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3Dnosim/theprogramm
e
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or to
unsubscribe send a blank email to 



---

Improve your web design skills with these new books from Glasshaus.

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3Dnosim/theprogramm
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3Dnosim/theprogramm
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3Dnosim/theprogramm
e
r-20
---
Change your mail options at http://p2p.wrox.com/manager.asp or to
unsubscribe send a blank email to 




---

Improve your web design skills with these new books from Glasshaus.

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3Dnosim/theprogramm
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3Dnosim/theprogramm
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3Dnosim/theprogramm
e
r-20
Return to Index
P2P Archives
