JavaScript Enable/disable Button based on text in textboxes in asp.net

By: Suresh Dasari Aug 22, 2010

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

//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>

<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

9 comments :

priya said...: thank you very much; January 11, 2011 at 2:25 AM
IsmeSon said...: 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!; February 3, 2012 at 2:14 PM
Anonymous said...: Please use document.getElementById("<%=btnSave.ClientID%>").disabled = false; to avoid java script null errors.; April 12, 2012 at 12:10 AM
Unknown said...: This comment has been removed by the author.; January 8, 2013 at 1:50 AM
Anonymous said...: thanku bhai...; January 24, 2013 at 10:58 PM
Nisha said...: 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 :); March 3, 2013 at 11:26 PM
Unknown said...: hello sir

using the one text box how to disable more then one button and textboxes; November 15, 2013 at 4:57 AM
Articles Journal.com Growing Knowledge said...: but i need this in inside Gridview.
How can it be implemented inside gridview; December 11, 2013 at 10:09 PM
Unknown said...: Sir ,
I need it like whenever the user enters a text(its for an online quiz) and clicks on the submit button ....then if the user had entered the correct answer then,..it should take the user to the next page....if the user had entered the wrong answer ...then the browser must display an error message.
Please help with this....; October 17, 2014 at 11:34 AM