Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to prevent buttons from submitting forms in HTML?
There are several ways to prevent buttons from submitting forms in HTML. The most common approaches involve using the onsubmit event handler, the event.preventDefault() method, or setting the button type attribute. These techniques are useful when you want to perform client-side validation, handle form data with JavaScript, or create interactive forms without page refreshes.
Syntax
Following are the main syntaxes for preventing form submission
<form onsubmit="return false;">
<form onsubmit="event.preventDefault();">
<button type="button">Non-submitting Button</button>
Using the onsubmit Property with return false
The onsubmit property can be used to prevent form submission by returning false. When the form's onsubmit event handler returns false, the browser cancels the form submission process.
Example
Following example shows how to prevent form submission using onsubmit="return false;"
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prevent Form Submission - Return False</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection Form</h2>
<form onsubmit="return false;">
<p>Select your preferred subject:</p>
<div style="margin: 10px 0;">
<input type="radio" id="maths" name="subject" value="maths">
<label for="maths">Maths</label>
<input type="radio" id="science" name="subject" value="science" style="margin-left: 20px;">
<label for="science">Science</label>
<input type="radio" id="english" name="subject" value="english" style="margin-left: 20px;">
<label for="english">English</label>
</div>
<button id="submit" type="submit" style="padding: 8px 16px; margin-top: 10px;">Submit</button>
<p id="message" style="color: red; font-weight: bold;"></p>
</form>
</body>
</html>
The output shows the form with radio buttons. When you click Submit, the form will not be submitted and the page will not refresh
Course Selection Form Select your preferred subject: ? Maths ? Science ? English [Submit]
Using event.preventDefault() Method
The event.preventDefault() method cancels the default action of an event. When used in a form's onsubmit event, it prevents the form from being submitted to the server.
Example
Following example demonstrates preventing form submission using event.preventDefault()
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prevent Form Submission - preventDefault</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form id="userForm" action="/submit" method="post">
<div style="margin: 10px 0;">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required style="margin-left: 10px; padding: 5px;">
</div>
<div style="margin: 10px 0;">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required style="margin-left: 30px; padding: 5px;">
</div>
<button type="submit" style="padding: 8px 16px; margin-top: 10px;">Register</button>
<p id="status" style="color: blue; font-weight: bold; margin-top: 10px;"></p>
</form>
<script>
document.getElementById('userForm').addEventListener('submit', function(event) {
event.preventDefault();
document.getElementById('status').textContent = 'Form submission prevented!';
});
</script>
</body>
</html>
When you fill the form and click Register, the form submission is prevented and a status message appears
User Registration Form Username: [text input] Email: [email input] [Register] Form submission prevented!
Using Button Type Attribute
By default, buttons inside forms have type="submit". To prevent a button from submitting a form, you can set its type attribute to "button". This creates a regular button that doesn't trigger form submission.
Example
Following example shows different button types and their behavior
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Types Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Button Types Demonstration</h2>
<form action="/submit" method="post">
<div style="margin: 10px 0;">
<label for="message">Message:</label>
<input type="text" id="message" name="message" value="Hello World" style="margin-left: 10px; padding: 5px;">
</div>
<div style="margin-top: 15px;">
<button type="submit" style="padding: 8px 16px; margin-right: 10px;">Submit Form</button>
<button type="button" onclick="showMessage()" style="padding: 8px 16px; margin-right: 10px;">Non-Submit Button</button>
<button type="reset" style="padding: 8px 16px;">Reset Form</button>
</div>
<p id="output" style="color: green; font-weight: bold; margin-top: 15px;"></p>
</form>
<script>
function showMessage() {
var msg = document.getElementById('message').value;
document.getElementById('output').textContent = 'Button clicked! Message: ' + msg;
}
</script>
</body>
</html>
The example shows three button types. Only the first button submits the form, while the second button performs a custom action without submission
Button Types Demonstration Message: [Hello World] [Submit Form] [Non-Submit Button] [Reset Form] Button clicked! Message: Hello World
Conditional Form Submission Prevention
You can conditionally prevent form submission based on validation or user input. This is useful for client-side form validation.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conditional Form Prevention</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Age Validation Form</h2>
<form onsubmit="return validateAge()">
<div style="margin: 10px 0;">
<label for="age">Enter your age:</label>
<input type="number" id="age" name="age" min="1" required style="margin-left: 10px; padding: 5px;">
</div>
<button type="submit" style="padding: 8px 16px; margin-top: 10px;">Submit</button>
<p id="validation-message" style="color: red; font-weight: bold; margin-top: 10px;"></p>
</form>
<script>
function validateAge() {
var age = document.getElementById('age').value;
var messageElement = document.getElementById('validation-message');
if (age < 18) {
messageElement.textContent = 'You must be 18 or older to submit this form.';
messageElement.style.color = 'red';
return false; // Prevent submission
} else {
messageElement.textContent = 'Form submitted successfully!';
messageElement.style.color = 'green';
return false; // Prevent actual submission for demo
}
}
</script>
</body>
</html>
This form validates the user's age before allowing submission. If the age is less than 18, submission is prevented
Age Validation Form Enter your age: [number input] [Submit] You must be 18 or older to submit this form. (if age < 18) Form submitted successfully! (if age >= 18)
Comparison of Methods
Following table compares the different methods for preventing form submission
| Method | Usage | Best For |
|---|---|---|
onsubmit="return false" |
Always prevents submission | Completely disabling form submission |
event.preventDefault() |
Prevents default form behavior | Custom form handling with JavaScript |
type="button" |
Makes button non-submitting | Action buttons that don't submit forms |
| Conditional return false | Prevents based on validation | Client-side form validation |
Conclusion
Preventing form submission can be achieved through multiple methods: onsubmit="return false" for complete prevention, event.preventDefault() for JavaScript-controlled handling, or type="button" for non-submitting buttons. Choose the method based on whether you need complete prevention, conditional validation, or custom form processing.
3K+ Views
