How to prevent buttons from submitting forms in HTML ?
Last Updated :
28 Dec, 2023
In this article, we will use different approaches for preventing buttons from submitting forms. There are several reasons where preventing the buttons from submitting forms, i.e., if the user hasn’t completed all the required form fields, or added incorrect details in the form, etc. For this, we can implement different approaches, which are discussed below.
We can stop the submit button from submitting the form by disabling it. It means you can’t click on the button as it is non-clickable by using the ‘disabled’ property.
Syntax:
<form>
<button type="submit" disabled>Submit</button>
</form>
Example: In the following example, we are adding the disabled attribute to it so it can’t be clicked and hence the form will not be submitted.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Disable Submit Button</title>
<style>
form {
margin: 300px 500px;
display: flex;
flex-direction: column;
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<form>
<h1>GeeksforGeeks</h1>
<label for="name">Name:</label>
<input type="text"
id="name"
name="name" />
<br />
<label for="email">Email:</label>
<input type="email"
id="email"
name="email" />
<br />
<button type="submit" disabled>
Submit
</button>
</form>
</body>
</html>
|
Output:
Approach 2: Using the onsubmit Method
To prevent buttons from submitting forms in HTML use the onsubmit attribute with return false value.
Example: In the following example, we are adding the onsubmit attribute with return false and hence the form will not be submitted.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Disable Submit Button</title>
<style>
form {
margin: 300px 500px;
display: flex;
flex-direction: column;
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<form onsubmit="return false;">
<h1>GeeksforGeeks</h1>
<label for="name">Name:</label>
<input type="text" id="name"
name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email"
name="email" />
<br />
<button type="submit">
Submit
</button>
</form>
</body>
</html>
|
Output:
Approach 3: Using event.preventDefault() Method:
You can prevent the form submission by calling event.preventDefault() method on the submit event of the form in JavaScript. This method will stop the default form submission behavior and you can handle the form data as per your requirement.
Syntax:
document.getElementById('submit-btn').addEventListener('click',
function(event) {
// Handle the form data
event.preventDefault();
});
Example: In this example, we get the form element using document.querySelector() and add an event listener to the submit button using addEventListener(). In the event listener function, we’re calling event.preventDefault() method to prevent the default behavior of the button, which is to submit the form. You can then handle the form data as per your requirement.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Disable Submit Button</title>
<style>
form {
margin: 300px 500px;
display: flex;
flex-direction: column;
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<form>
<h1>GeeksforGeeks</h1>
<label for="name">Name:
</label>
<input type="text"
id="name"
name="name" />
<br />
<label for="email">Email:
</label>
<input type="email"
id="email"
name="email" />
<br />
<button type="submit"
id="submit-btn">Submit
</button>
</form>
<script>
const form = document.querySelector("form");
// Prevent form submission on button click
document
.getElementById("submit-btn")
.addEventListener("click", function (event) {
event.preventDefault();
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...