I find myself often with a need to disable/enable a button according to client events that occur on web pages.
Today I helped to implement this behavior again so I thought it will be nice to share the code I used. In this example I’m disabling/enabling a button according to whether a textbox holds some text. I’m using jQuery to make the code simple. Pay attention that this solution can be implemented for other events also.
The Code
$(document).ready(function () {
$('#txtAgentName').blur(function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});
As you can see I wire up the ready event of the page and hook a blur event to the textbox with the txtAgentName id. In the blur event I check the value of the textbox and if it is empty I disable the button and if it is not I enable the button. The page that this example is taken from is an MVC 2 view which holds the textbox and the button elements:
<input id="btnUpdate" type="submit" value="Update" disabled />
<%= Html.TextBox("txtAgentName") %>
Summary
A lot was written about how jQuery simplify the Javascript code that you write. In this tip I used jQuery to set Html elements appearance when some event occurs.
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net