I have a multiline textbox that by default, is set to ReadOnly. I would like a button on the page to change the control to allow it to be edited. I would like this code to run on the client side because the page renders slowly and I'd like to avoid the post back.
The problem I'm having is the javascript code that I wrote to remove the readonly attribute appears to have no effect. I posted a stripped down example that illustrates the problem for your review.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<script runat="server">
</script>
<html xmlns="">
<head runat="server">
<title>Test</title>
<script type="text/javascript" language="javascript">
function EnableEditing() {
var e = document.getElementById("<%=TextBox1.ClientID%>");
var result = e.removeAttribute("readonly");
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div> </div>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True" TextMode="MultiLine">test</asp:TextBox>
<input id="Button1" onclick="EnableEditing()" type="button" value="Remove RO" />
</form>
</body>
</html>
I have a multiline textbox that by default, is set to ReadOnly. I would like a button on the page to change the control to allow it to be edited. I would like this code to run on the client side because the page renders slowly and I'd like to avoid the post back.
The problem I'm having is the javascript code that I wrote to remove the readonly attribute appears to have no effect. I posted a stripped down example that illustrates the problem for your review.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" language="javascript">
function EnableEditing() {
var e = document.getElementById("<%=TextBox1.ClientID%>");
var result = e.removeAttribute("readonly");
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div> </div>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True" TextMode="MultiLine">test</asp:TextBox>
<input id="Button1" onclick="EnableEditing()" type="button" value="Remove RO" />
</form>
</body>
</html>
2 Answers
Reset to default 3TextBox1 is the server side id,
try
var e = document.getElementById("<%=TextBox1.ClientID%>");
var result = e.removeAttribute("readonly",0);
or if you dont want the caseinsensitive search
var result = e.removeAttribute("readOnly");//note upercase Only
Use var e = document.getElementById("<%=TextBox1.ClientID%>");
Also, if you want to read the modified text on postback, you can't set the readonly attribute on the server control. You have to set it on the client only, as in: TextBox1.Attributes("readOnly") = "readOnly";