In this post, you'll learn how to enable a button (making it active and clickable) only when an input field has a value.
The process is straightforward. We simply need to monitor the length of the input field's value and conditionally enable or disable the button accordingly.
When the input field's value length exceeds zero, we enable the button. Otherwise, we keep it disabled.
Enable button only when input field has value.
1. So first we verify if the input field's value is empty upon page loading. If it is empty, we disable the button.
2. Next, we implement a function that monitors input within the input field. This function continuously checks the input field's value on input.
3. If the input field's value length exceeds zero, we enable the button. Otherwise, it remains disabled.
4. To ensure a clear visual distinction between disabled and enabled states, I applied custom styling to buttons based on their state. because disabled button states are often not apparent with custom styling like background colour , colour etc on button.
See below code for better understanding.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enable and Disable Button Based on Input Field Value. | maketechstuff.com</title>
</head>
<body>
<div class="box">
<div class="input_box">
<input type="text" class="input_field" placeholder="Text">
</div>
<Button type="button" class="button">Save</Button>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100%;
background-color: blue;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
border-radius: 3px;
padding: 35px;
text-align: center;
background-color: #fff;
box-shadow: 0px 5px 10px -8px #000;
}
.input_box {
margin: 10px 0px;
display: inline-flex;
width: 100%;
}
input {
width: 100%;
padding: 10px;
font-size: 35px;
outline: none;
}
button {
font-size: 40px;
padding: 6px 30px;
border-radius: 3px;
background-color: blue;
color: #fff;
border: none;
cursor: pointer;
opacity: 0.5;
pointer-events: none;
transition: 0.8s;
}
.active {
opacity: 1;
pointer-events: fill;
}
JavaScript
let input_field = document.querySelector(".input_field");
let button = document.querySelector(".button");
// Checking input field value on page load. If empty we disabled the button, if has value we enabled the button.
enable_and_disable_button();
input_field.addEventListener("input", enable_and_disable_button);
function enable_and_disable_button() {
if (input_field.value.length > 0) {
button.disabled = false;
// Adding active class to show button is enabled.
button.classList.add("active");
} else {
button.disabled = true;
// Removing active class to show button is disabled.
button.classList.remove("active");
}
}
As you can see I have disabled and enabled button with button.disabled = true; and button.disabled=false;.
You can also disabled and enabled button by button.setAttribute("disabled", true); and button.removeAttribute("disabled");.
Output:
So that's how you can enable and disable buttons based on input field value using html css and JavaScript. If you have any query feel free to write in the comment section.
Thanks for reading this far.
You may like:
- How to enable and disable button dynamically with JavaScript.
- How to show and hide button based on input field value.
- How to add hover effects on button border.
- How to rotate the button border using HTML and CSS.
- How to detect button hold using JavaScript.
- How to change button text with animation using HTML CSS and JavaScript.
- How to create a read more and read less button functionality using HTML CSS and JavaScript.
Share your thoughts.