Jump to content

How to Disable Submit Button on Form Submit in JavaScript?

Linux Hint

Recommended Posts

In HTML the “Submit” button is used to submit the information of the form to the form-handler. The “form-handler” is an external file on the server that collects the information of a form placed on the website. The “submit” button is in an enabled state by default at the time of form creation. However, the user can also handle its state i.e. enable/disable manually based on the requirements.

This guide explains all possible methods to disable the “submit” button on form submit in JavaScript. The highlights of this guide are noted below:

Let’s start with the first method.

Before moving on to the practical implementation, first have a look at the below-stated HTML code.


<h2>Application Form</h2>

<form id="myForm">

Name: <input type="text" placeholder="Enter Name" ><br><br>

Address: <input type="text" placeholder="Enter Address" ><br><br>

Contact No: <input type="text" placeholder="Enter contact no." ><br><br>


<button type="submit" id="btn">Disable Submit Button</button>

In the above code lines:

  • The “<form>” tag creates a form with the id “myForm”.
  • Inside this form, three input fields are added using the “<input>” tag with the type “text” and the placeholder attribute.
  • After that, add a line break after the form through the “<br>” tag.
  • Lastly, the “<button>” tag inserts a button with the type “submit”, and the id “btn”.

Note: The particular lines of code are followed in all methods of this guide.

Method 1: Using “event.preventDefault()” Method

The “event.preventDefault()” method prevents the default behavior of the targeted HTML element when its associated event triggers. In this method, it is used to disable the submit button while submitting the form

JavaScript Code


const button = document.querySelector("form");

document.getElementById("btn").addEventListener("click", (event) => {




In the above code block:

  • Firstly, the “button” variable applies the “querySelector()” method to access the first form element from the given document.
  • Next, the “getElementById()” method accesses the submit button using its id. It then calls the “event.preventDefault()” method when the specified “click” event triggers via the “addEventListener()” method.



The output shows that the “Submit” button is not functioning i.e. does not submit the given form.

Method 2: Using the Button “disabled” Property

The HTML DOM button “disabled” property sets or retrieves whether the button is disabled or enabled. It works on boolean values i.e. “true” and “false”. By default, its value is “false” which shows the button is not disabled.

In the following example, it is used to disable the “submit” button on form submission.


<button type="submit" id="btn" onclick="jsFunc()">Disable Submit Button</button>

An “onclick” event is attached with the “submit” button to execute the “jsFunc()” when the user clicks on it.

JavaScript Code


function jsFunc() {

document.getElementById("btn").disabled = true;



This time, the “jsFunc()” utilizes the “getElementById()” to access the submit button through its id “btn” and then disabled it by specifying the “disabled” property value “true”.



The output depicts that the “disabled” property successfully disabled the given button functionality on form submission.

Note: All of the discussed methods are also applicable to buttons with the type “button” which is considered a “submit” button.


To disable the “submit” button on the form submitting, use the JavaScript “event.preventDefault()” method or the Button “disabled” property. The use of both these approaches depends on the user’s choice. Both of the discussed approaches are quite simple and easy to use. This guide has explained all possible methods practically to disable the “submit” button functionality on form submission.

View the full article

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...