Click here to Skip to main content
Click here to Skip to main content

Quick Tip – Disable/Enable Button by Textbox using jQuery

, 16 Sep 2010
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)

About the Author

Gil Fink
Architect Sela Group
Israel Israel
Gil Fink is an expert in web development and Microsoft web and data platforms. He works as a senior consultant and architect at Sela Group. 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 a co-author of several Microsoft Official Courses and training kits and the founder of Front-End.IL meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+

Comments and Discussions

 
Questioncan we make disable or enable to asp:button also Pinmemberkashyap201021-Sep-10 1:27 
AnswerRe: can we make disable or enable to asp:button also PinmemberGil Fink21-Sep-10 3:56 
AnswerRe: can we make disable or enable to asp:button also PinmemberJeffBall5-Jan-11 11: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 | Mobile
Web02 | 2.8.140709.1 | Last Updated 16 Sep 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid