In this article I will explain with an example, how to enable Button when text is entered in TextBox using jQuery.
This article will illustrate how to enable Button when text is entered in TextBox using the OnKeyUp event of TextBox in jQuery.
HTML Markup
The HTML Markup consists of an HTML TextBox and a Button. The HTML Button has been assigned disabled using the disabled attribute.
Passport Number:
<input type="text" id="txtPassportNumber" />
<hr />
<input id="btnSubmit" type="button" value="Submit" disabled="disabled" />
Enable Button when text is entered in TextBox using jQuery
Inside the jQuery document ready event handler, the TextBox has been assigned with a jQuery OnKeyUp event handler.
When User inputs a value in TextBox, first the Button is referenced. Then the value of the TextBox is checked.
If the TextBox has value, the Button is enabled and if the TextBox is empty, the Button is disabled using jQuery.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtPassportNumber").keyup(function () {
//Reference the Button.
var btnSubmit = $("#btnSubmit");
//Verify the TextBox value.
if ($(this).val().trim() != "") {
//Enable the TextBox when TextBox has value.
btnSubmit.removeAttr("disabled");
} else {
//Disable the TextBox when TextBox is empty.
btnSubmit.attr("disabled", "disabled");
}
});
});
</script>
Screenshot
![jQuery: Enable Button when text is entered in TextBox]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
