Disable Enable textbox using javascript

By
Advertisement


Introduction:
In this article I am going to explain about the javascript code used for disabling and enabling and also the disadvantages of disabling the textboxes and the alternatives for this.

Explanation:
While programming for security reasons or for some other reasons we supposed to disable certain Textboxes.  For disabling the textbox we have to set the disabled property  to true using javascript. The javascript code for disabling textbox is given below. 

For enabling the textbox we have to set disabled property to false. below  is the code used.


document.getElementById('<%=txtdisable.ClientID %>').disabled = false;

But the disadvantage of disabling the textbox is we cann’t get the value of the disaled textbox in code behind. So to avoid this instead of disabling we may make the textbox readonly. So that it is available in code behind. The below code is used for making the textbox as readonly .


document.getElementById('<%=txtReadOnly.ClientID %>').readOnly = "true";


For removing the readonly property of the textbox below code is used.
One for disabling and one for making read only.each text box have a button. If u click the disable button then it will disable the first textbox. If u click the readonly button then it will make the second textbox readonly. After that we have a common button called submit which is used for assigning the textbox values to lables. But in the outbut u may notice that the disabled textbox value is not binded with the label.Full source code is given below.

ASPX code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
    <table>
        <tr>
            <td>
                <asp:TextBox ID="txtdisable" runat="server"></asp:TextBox>
            </td>
            <td>
          <input type="button" value="Disable" id="btnDisable" onclick="fnDisable();" />
            </td>
            <td>
              <asp:Label ID="lblDisable" runat="server" Text=""></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <asp:TextBox ID="txtReadOnly" runat="server"></asp:TextBox>
            </td>
            <td>
       <input type="button" value="Readonly" id="btnReadonly" onclick="fnReadOnly();" />
            </td>
            <td>
                <asp:Label ID="lblReadOnly" runat="server" Text=""></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="2">
     <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    function fnDisable() {
        document.getElementById('<%=txtdisable.ClientID %>').disabled = "true";

    }
    function fnReadOnly() {
        document.getElementById('<%=txtReadOnly.ClientID %>').readOnly = "true";

    }
</script>
</form>
</body>
</html>

CS Code:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    lblDisable.Text = txtdisable.Text;
    lblReadOnly.Text = txtReadOnly.Text;
}


Thus the above code explains the process of disabling textbox and disadvantages and alternatives to that.

Do you like this article. Then comment here or share with your friends. Or like our Facebook page. Or post your comments below

Download Source Code Here

1 comment:

Online Casino