Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

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

<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 RSS subscribe by email Subscribe by Email

8 comments :

priya said...

thank you very much

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!

Anonymous said...

Please use document.getElementById("<%=btnSave.ClientID%>").disabled = false; to avoid java script null errors.

Ram Kumar said...
This comment has been removed by the author.
Anonymous said...

thanku bhai...

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 :)

JK DOSS said...

hello sir

using the one text box how to disable more then one button and textboxes

Articles Journal.com Growing Knowledge said...

but i need this in inside Gridview.
How can it be implemented inside gridview

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.