All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Disable A Button In JavaScript

Last Updated : Mar 11, 2024

How To Disable A Button In JavaScript

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.


addEventListener(EventType, Function)

Step By Step Guide On How To Disable A Button In JavaScript :-

<!DOCTYPE html>
<html lang="en">
    <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="">
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        <h1> TALKERSCODE </h1>
        <h3> how to disable a button in javascript </h3>
    <form >
        <input type="text" name="username" id="username" placeholder="username">
        <button disabled type="submit" id="submit"> submit </button>
        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 ;
        }) ;
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. we will use an external CSS file to style the html page
  6. using <style> tag to add CSS
  7. <h1> tag used to add a heading
  8. Now create a form using <form> tag.
  9. 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
  10. Then create a button using <button> tag which is initially disabled with an id of submit
  11. Create a <Script> tag to write JavaScript within it.
  12. Now create a constant using const for submit button and input and access it using document.getElementById() by respective Ids
  13. Then add the .addEventListner tag with the event name of the keyup and a function e.
  14. Using the currentTarger property with a constant of value
  15. 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
  16. 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.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪