How to Disable Submit Button on Form Submit in JavaScript ?

Last Updated : 18 Dec, 2023

Forms are a crucial part of web development as they allow users to submit data to a server. However, sometimes we want to customize the behavior of HTML forms and prevent the default behavior from occurring. This allows you to create a more interactive and user-friendly web application. In this article, we will discuss different approaches to prevent buttons from submitting forms, along with examples and syntax.

There are multiple approaches to prevent buttons from submitting forms. Here are two common approaches:

Table of Content

Use the "event.preventDefault()" method
Use the "button" element instead of the input type "submit" element

Approaches 1: Use the "event.preventDefault()" method

This approach will use the event.preventDefault() method to prevent the default behavior of the submit button. This method is called in the button click event listener, and it stops the form from being submitted.

Syntax:

const button = document.querySelector('button');
button.addEventListener('click', (event) => {
      event.preventDefault();
      // Custom logic
});

Example: In this example, we use the "event.preventDefault()" method to prevent the default behavior of the submit button. The button clicks event listener contains the custom logic for the form submission.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
          Disable submit button on form submit
      </title>
</head>

<body>
    <form>
        <input type="text" 
               name="username" 
               placeholder="Username">
        <br><br>
        <input type="password" 
               name="password" 
               placeholder="Password">
        <br><br>
        <button type="submit" 
                id="clk">
            Submit
        </button>
    </form>

    <script>
        const button = 
              document.querySelector("form");
        document
            .getElementById("clk")
            .addEventListener("click", (event) => {
                event.preventDefault();
            });
    </script>
</body>

</html>

Output:

Approaches 2: Using "button" element instead of input type "submit" element

This is another approach where we will use the "button" element instead of the "submit" element. The button element is often used to trigger a JavaScript function, while the input type submits element is used to submit a form. By using the button element, the form will not submit by default, and you can add your custom logic to the button click event.

Syntax:

<button type="button" onclick="submitForm()">
    Submit
</button>

Example: In this example, we use the "button" element instead of the "submit" element. The button element triggers a JavaScript function named "submitForm()". This function contains the custom logic for the form submission.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        Disable submit button on form submit
    </title>
</head>

<body>
    <form>
        <input type="text" 
               name="username" 
               placeholder="Username" />
        <br><br>
        <input type="password" 
               name="password" 
               placeholder="Password" />
        <br><br>
        <button type="button" 
                onclick="submitForm()" 
                id="clk">
            Submit
        </button>
    </form>

    <script>
        function submitForm() {
            document.getElementById("clk").disabled = true;
        }
    </script>
</body>

</html>

Output:

Preventing buttons from submitting forms is a simple yet effective solution to prevent the default behavior from occurring. These techniques can lead to a better user experience and allow you to create a more interactive and user-friendly web application.