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

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.
Similar Reads
How to disable or enable form submit button in jQuery? Enabling or disabling the form submit button based on a checkbox selection in jQuery. This ensures user compliance with terms and conditions before form submission. Syntax:$('#enabled').click(function () { if ($('#submit-button').is(':disabled')) { $('#submit-button').removeAttr('disabled'); } else
2 min read
How to disable radio button using JavaScript ? Radio buttons let users select one option from many, commonly used in forms. Sometimes, based on a user's previous choice, certain options need to be disabled. For example, if a user selects "No" to playing games, we can disable related game options. Using JavaScript, about 65% of forms use such log
4 min read
How to submit a form by clicking a link in JavaScript ? Submitting a form by clicking a link in JavaScript involves binding a click event handler to the link element. When clicked, the handler triggers the form's submit action programmatically, allowing form submission without the need for a traditional submit button. ApproachHTML Structure:Basic HTML st
2 min read
How to disable form submit on enter button using jQuery ? There are two methods to submit a form, Using the "enter" key: When the user press the "enter" key from the keyboard then the form submit. This method works only when one (or more) of the elements in the concerned form have focus. Using the "mouse click": The user clicks on the "submit" form button.
2 min read
How to Disable Specific Readio Button Option using JavaScript? In this article, we will disable a specific radio button using JavaScript. Disabling specific radio button options using JavaScript involves targeting the specific option and then set its disabled property to true. This can be done by selecting the radio button option and modifying its disabled prop
2 min read
How to Create Form Submit Button in HTML ? In HTML, the form submit button plays a crucial role in sending user data to the server for processing. It's typically created using either <input type="submit"> the <button> tag. Around 95% of web forms use one of these two methods, making them essential for enabling user interaction an
3 min read
How to Disable a Button Conditionally in JavaScript? In JavaScript, you can conditionally disable buttons based on specific criteria to control user interactions. Using simple if-else statements or event listeners, you can dynamically enable or disable buttons depending on form validation, user actions, or other conditions. This helps regulate the ava
3 min read
How to solve âSubmit is not a functionâ error in JavaScript ? Ever tried to submit a form, by using a JavaScript? But when you tried to submit the form by using JavaScript, you might be getting a âSubmit is not a functionâ error in the code. Well, donât panic as of yet. This article is being dedicated to solving that problem of yours.So what are we waiting for
3 min read
How to Disable Button Element Dynamically using JavaScript? The disabled property in the HTML DOM is used to control the interactivity of a button element. When this property is set, the button becomes unclickable and inactive, effectively preventing any user interaction. This property accepts a boolean value, allowing developers to dynamically enable or dis
1 min read
How to Disable a Button in React JS ? Disabling a button in React JS means making it unclickable and visually indicating its unavailability. This is done by setting the button's disabled attribute to true. It's used for controlled interactions, like form submissions with valid data.A disabled button becomes unclickable and visually sign
4 min read