How to Disable Submit Button on Form Submit in JavaScript?

July 31, 2023 | by Arround The Web | No comments

How to Disable Submit Button on Form Submit in JavaScript?

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.

HTML Code

<h2>Application Form</h2>

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>

</form><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) => {

event.preventDefault();

});

</script>

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.

Output

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.

HTML Code

<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;

}

</script>

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”.

Output

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.

Conclusion

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.

Source: linuxhint.com