While it's straightforward to disable an input field by directly adding the disabled attribute in HTML, we'll delve into a dynamic approach in this blog post: disabling an input field using JavaScript upon a button click.
JavaScript method.
setAttribute().
Let's disable the input field on click of button.
We'll create a function that disables the input field upon a button click. disabling the input field will be accomplished using JavaScript's setAttribute method.
See below code.
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>Disable Input Field | maketechstuff.com</title>
</head>
<body>
<div class="box">
<input type="text" class="input_field">
<button type="button" class="button">Disable</button>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
padding: 15px;
text-align: center;
}
input {
width: 100%;
font-size: 30px;
}
button {
font-size: 20px;
padding: 6px 30px;
margin: 10px 0px;
cursor: pointer;
}
JavaScript
let input_field = document.querySelector(".input_field");
let button = document.querySelector(".button");
button.addEventListener("click", disable_input_field);
function disable_input_field() {
input_field.setAttribute("disabled", true);
}
Output:
You can also disable input field like this with out setAttribute() method.
JavaScript
let input_field = document.querySelector(".input_field");
let button = document.querySelector(".button");
button.addEventListener("click", disable_input_field);
function disable_input_field() {
input_field.disabled = true;
}
That's how you can disable an input field with a button click using JavaScript. If you have any questions or suggestions, feel free to leave them in the comments section below.
Thank you for your time and attention!
You may like:
- How to make input field to convert any text case to uppercase or lowercase instantly on input.
- How to clear input field using JavaScript.
- How to get the value of input field on click using JavaScript.
- How to enable or disable button based on input field value using HTML CSS and JavaScript.
- How to make input field value same as another input field on click using JavaScript.
- Create input field that accept only alphanumeric values using JavaScript.
Share your thoughts.