The ability to dynamically enable and disable buttons is particularly useful for situations such as saving data to a web server. In order to prevent a user from making multiple save requests while the request is being made and the client is waiting for a response, you can dynamically disable the save button. Once the client has received a response from the web server, you can re-enable the save button.
This functionality can also be very effective in simple situations, such as enabling the search button when the user has inputted a search term. This makes it clear to the user that they cannot search unless a term has been entered.
Create a blank HTML document named recipe-7.html, and have it open and ready for editing.
The following HTML code creates a web page with a search input and a search button, which is disabled by default. Add the following code to
recipe-7.html:<!DOCTYPE html> <html> <head> <title>Enable and disable buttons by changing their properties </title> <script src="jquery.min.js"></script> <script> </script> </head> <body> <input type="text" id="search-input" /> <button id="search-btn" disabled>Search</button> </body> </html>
Saving and opening this HTML in a browser should provide you with a very simple web page having a single input and a disabled button as illustrated in the following screenshot:
Add the following JavaScript within the script tags in the head section of the HTML document created previously:
$(function(){ //Listen for a key up event on the search input $('#search-input').keyup(function(){ //When a user presses and releases a key //Check to see if the length of the inputted //data is greater than 2 if ($(this).val().length > 2) { //If the input length is greater than //two then we enable the search button $('#search-btn').prop("disabled", false); } else { //If the input length is equal to 2 or less we disable the search button $('#search-btn').prop("disabled", true); } }); });Opening this page within a web browser will provide you with an input and a disabled search button until you enter some text into the search input. When text is entered into the search input and the length of the text is greater than two characters, the search button will become available.
Our aim is to enable the search button once there has been some text inputted into the search input by the user. To do this, we need to attach a .keyup() event handler to the search input. This will allow us to execute some code while the user is inputting some text. By providing a function as an argument to the keyup() function, we can then check the inputted data. If the input data has a length of two or more characters (as a search less than three characters would be a little ambiguous), we can enable the search button.
Using the following JavaScript, we are able to listen for data input, check the input length, and depending on this, enable or disable the search button:
$(function(){
$('#search-input').keyup(function(){
if ($(this).val().length > 2) {
$('#search-btn').prop("disabled", false);
} else {
$('#search-btn').prop("disabled", true);
}
});
});First of all, we attach the
keyup event to the search input using $('#search-input').keyup();, referencing its ID. Then, within the callback function, we are able to check the length of the currently inputted text using $(this), which refers to the element to which we have attached the keyup event. The
val() function then gets the inputted text, and we can use the length property to find its length. Using an if/else statement, we can decide if the search button needs to be enabled or disabled.
To enable or disable the search button, we use jQuery's prop() function and set the disabled property to either true or false.