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
Stop making form to reload a page in JavaScript
When a form is submitted, browsers reload the page by default. To prevent this behavior and handle form submissions with JavaScript, we need to stop the default form submission event.
The Problem
HTML forms automatically reload the page when submitted. This interrupts JavaScript processing and user experience:
<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
type="submit"
name="submit"
value="SUBMIT"
onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>
Method 1: Using preventDefault() with Form Submit Event
The most reliable approach is using event.preventDefault() in the form's submit event handler:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent Form Reload</title>
</head>
<body>
<form id="emailForm" action="#">
<input
type='text'
name='email'
id='email'
size="36"
placeholder="Your e-mail :)"/>
<input
type="submit"
value="SUBMIT"
/>
</form>
<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents page reload
const email = document.getElementById('email').value;
if (ValidateEmail(email)) {
console.log('Email is valid:', email);
// Process form data here
} else {
console.log('Please enter a valid email');
}
});
function ValidateEmail(email) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPattern.test(email);
}
</script>
</body>
</html>
Method 2: Using return false in onclick
You can also prevent form submission by returning false from the onclick handler:
<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
type="submit"
value="SUBMIT"
onclick="return ValidateEmail(document.formcontact1.email)"
/>
</form>
<script>
function ValidateEmail(inputElement) {
const email = inputElement.value;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(email)) {
console.log('Email is valid:', email);
return false; // Prevents form submission
} else {
alert('Please enter a valid email');
return false; // Prevents form submission
}
}
</script>
How preventDefault() Works
The event.preventDefault() method tells the browser to cancel the default action associated with the event. For forms, this prevents the automatic page reload and form submission to the server.
Comparison
| Method | Event Handler | Best Practice |
|---|---|---|
preventDefault() |
Form submit event | Yes ? modern and reliable |
return false |
Button onclick | Acceptable ? older approach |
Key Points
- Always call
preventDefault()early in your event handler - Use form submit events rather than button click events for better accessibility
- Validate form data before processing to ensure data quality
Conclusion
Use event.preventDefault() with form submit event listeners to prevent page reloads. This approach provides better control over form handling and improves user experience by allowing client-side processing.
8K+ Views
