How To Disable A Button In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of how to disable a button in JavaScript, let us understand the tag, addEventListener(): event listener in javascript used to handle in the basis of user interaction like the basic events such as click, mouse hover, keypress, keyup, scroll etc.
Now in this tutorial, we will use keyup event. Using this the event occurs then the keyboard key of the user stop being pressed.
Syntax:
addEventListener(EventType, Function)
Step By Step Guide On How To Disable A Button In JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> how to disable a button in javascript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> how to disable a button in javascript </h3>
</center>
<form >
<input type="text" name="username" id="username" placeholder="username">
<button disabled type="submit" id="submit"> submit </button>
</form>
<script>
const submitButton = document.getElementById("submit") ;
const input = document.getElementById("username") ;
input.addEventListener('keyup', (e) => {
const value = e.currentTarget.value ;
if (value === "") {
submitButton.disabled = true ;
}
else {
submitButton.disabled = false ;
}
}) ;
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- we will use an external CSS file to style the html page
- using <style> tag to add CSS
- <h1> tag used to add a heading
- Now create a form using <form> tag.
- Inside the <form> create an input using <input> tag with a type of text, name of username, id of username, and a placeholder of username
- Then create a button using <button> tag which is initially disabled with an id of submit
- Create a <Script> tag to write JavaScript within it.
- Now create a constant using const for submit button and input and access it using document.getElementById() by respective Ids
- Then add the .addEventListner tag with the event name of the keyup and a function e.
- Using the currentTarger property with a constant of value
- Now create an if-else statement first. Within the if statement if value is null then keep the submit button disabled by setting it to true
- And else statement for if the value is given by the user then the submit button will be enabled but setting it to true
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to disable a button in JavaScript.
I hope this article on how to disable a button in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
