Introduction
Here I will explain how to enable/disable button whenever user enter text in textboxes using JavaScript in asp.net
Description
I have taken two textboxes and one button now I need to write functionality like to enable button if user enter text in two textboxes. For this we need to test whenever user entering text in textboxes at that time we need to raise onkeyup event for particular textbox. By default this event is not available for textbox in asp.net but we have a chance to use this event for textbox. Here I am enabling button whenever user enters text in two textboxes using JavaScript.
Design aspx page
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> //function to enable button if two textboxes contains text function SetButtonStatus(sender, target) { var first = document.getElementById('<%=txtfirst.ClientID %>'); var second = document.getElementById('<%=txtText.ClientID %>'); //Condition to check whether user enters text in two textboxes or not if ((sender.value.length >= 1 && first.value.length >= 1) && (sender.value.length >= 1 && second.value.length >= 1)) document.getElementById(target).disabled = false; else document.getElementById(target).disabled = true; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txtfirst" runat="server" onkeyup="SetButtonStatus(this,'btnButton')"></asp:TextBox> <asp:TextBox ID="txtText" runat="server" onkeyup="SetButtonStatus(this,'btnButton')"></asp:TextBox> <asp:Button ID="btnButton" runat="server" Text="Button" Enabled="false" /> </div> </form> </body> </html> |
Demo
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
6 comments :
thank you very much
Thanks, I modified this example for only one text box. Since I'm using a master page for my webform, I needed to add "ctl00_MainPlaceHolder_" in front of my asp control's name for the JS to find my control.
Very useful example!
Please use document.getElementById("<%=btnSave.ClientID%>").disabled = false; to avoid java script null errors.
thanku bhai...
Hello sir,
I have different updatepanels to group the textboxes and dropdowns. Particular updatepanel will be visible on selection of tree view. My need is to check if value of text box is change in particular updatepanel. if date has been changed then only it should ask for saving else user can navigate without any message. I put it on textbox's "OnTextChanged" event. and function is like
function TestOnTextChange() {
document.getElementById("txtchange").Text = "yes";
}
but it gives error that the function is not part of the page. can you please advise how to resolve this. Many thanks in advance :)