How to disable submit button after form submission in JavaScript

In this article, we will explore five methods to disable the submit button after form submission using JavaScript.

Method 1: Using Inline JavaScript #

This method involves adding inline JavaScript directly in the HTML code to disable the submit button.

1. We add the onsubmit attribute to the <form> tag to trigger the JavaScript code when the form is submitted.


2. The JavaScript code inside the attribute accesses the submit button by its ID and sets its disabled property to true, disabling the button.

Method 2: Separate JavaScript function #

In this approach, we define a JavaScript function outside the HTML and call it on form submission.

1. We define the disableSubmitButton() function in the <script> section, which is called when the form is submitted.


2. The function locates the submit button by its ID and sets its disabled property to true.

Method 3: Using DOM Event Listener #

This method uses JavaScript to add an event listener to the form submit event.

1. We add an event listener to the form using addEventListener in the <script> section.


2. When the form is submitted, the specified function is executed, which disables the submit button by accessing it through its ID.

Method 4: using jQuery Method #

In this approach, we are using jQuery library to handle form submission and disabling the submit button.

1. We include the jQuery library via a script tag, providing access to its functionality.


2. The script sets up a listener for the form submit event using submit().


3. Upon submission, the prop() method disables the submit button by setting its disabled property to true.

Conclusions: #

In this article, we explored five different methods to disable the submit button after form submission using JavaScript:

1. Inline JavaScript: Add the onsubmit attribute to the form tag and use inline JavaScript to disable the button.


2. Separate JavaScript function: Define a JavaScript function and call it on form submission using the onsubmit attribute.


3. DOM Event Listener: Use addEventListener to attach a listener to the form submit event and disable the submit button.


4. jQuery Method: Utilize the jQuery library to handle form submission and disable the button using the prop() method.

These methods allow you to prevent multiple form submissions and provide a better user experience by preventing accidental resubmissions. Choose the method that suits your project and coding preferences.