Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Quick Tip – Disable/Enable Button by Textbox using jQuery

, 16 Sep 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Quick Tip – Disable/Enable Button by Textbox using jQuery 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 disabli

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. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
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
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRichard Waddell25-Sep-10 10:25 
Questioncan we make disable or enable to asp:button also Pinmemberkashyap201021-Sep-10 2:27 
AnswerRe: can we make disable or enable to asp:button also PinmemberGil Fink21-Sep-10 4:56 
AnswerRe: can we make disable or enable to asp:button also PinmemberJeffBall5-Jan-11 12:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 16 Sep 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid