Let us learn how to enable or disable buttons using javascript and jQuery based on whether the input field is filled or empty.
If you are a beginner or not very familiar with javascript or jQuery, we recommend that you go through the entire article. However, if you are just looking for the code, click here!
Table of Contents
- Introduction to disabling/enabling buttons
- Code Implementation using Javascript and jQuery
- Visualization
Introduction to disabling/enabling buttons
Often while filling out web forms have you noticed how the submit button just won't work unless we have filled all the required fields?
This is done by controlling the state of the button (enabled/disabled) based on whether the input field is filled or empty. The same principle applies to checkboxes and radio buttons.
Do you wish to implement such a feature on your web form too? Read on!
Before diving into the code let us first look at the logic behind toggling between different states of the button.
Logic behind toggling between disabled and enabled states of buttons
- Set button to disabled state in the beginning
- If the input value of the required field is empty, let the button remain disabled. (Disabled state = TRUE)
- If the input value of the required field is not empty, change the state of the button to enabled. (Or set disabled state = FALSE).
Below, we are going to see how to disable/enable a button with one required text field implemented using Javascript and jQuery.
Code Implementation for changing the state of the button
1. Using Javascript
A) HTML
Add the following HTML Code to your editor
//defining button and input field
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
Code Explanation
Using the above code we have defined two HTML elements namely an input text field and a button.
B) Javascript Code
//Program to disable or enable a button using javascript
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true; //setting button state to disabled
input.addEventListener("change", stateHandle);
function stateHandle() {
if (document.querySelector(".input").value === "") {
button.disabled = true; //button remains disabled
} else {
button.disabled = false; //button is enabled
}
}
</script>
Code Explanation
Now, using javascript we store a reference to each element, namely input, and button.
By default a button's state is enabled in HTML so by setting disabled = true, we have disabled the button for the user.
Then we add an event handler (addEventListener) to the input field with the event property change which monitors the interaction with elements.
Here we use the change property to monitor when the user types text inside the input field and run a function accordingly.
The function we run here is called the stateHandle() that gets activated every time there is a change in the status of the input field.
The function compares the value of the input field (the text field) with an empty string.
If the user has not typed anything, then the text field will be equal ( === ) to the empty string and the button will remain disabled (disabled = true).
If the user inputs text in the input field, then the button will get enabled (disabled = false).
Complete Code
<html>
<body>
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
</body>
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
if (document.querySelector(".input").value === "") {
button.disabled = true;
} else {
button.disabled = false;
}
}
</script>
</html>
Output
A) Inactive State
The button is disabled as the text field is empty
B) Active State
The button is enabled as the text field is not empty
Using jQuery to enable/disable a button
<html>
<head>
<title>jQuery - Enable or Disable Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="tbName" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#tbName').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
For the jQuery method too, we start by creating an HTML button and text field (submit and tbName respectively) and setting the button to disabled state initially.
Here the ready() function is used to make the function available once the document has been loaded. 3. The .on() method in jquery attaches the event handler to the input field (tbName).
The change event will check for changes in the input field and run the function accordingly.
Just like in javascript, if the text field is empty the button remains disabled, else it gets enabled.
Here the .prop() method is used to change the state of the button.
Visualization
You can play around with the above code using this editor and see which part of the code does what. You can also try out different CSS options for the button etc.
Top comments (0)