Article Categories

Selected Reading

How to prevent form from being submitted?

HTML Web Development Front End Technology

Preventing form submission is essential for client-side validation, custom handling, or multi-step forms. JavaScript provides several methods to prevent the default form submission behavior, allowing developers to validate data, show confirmation dialogs, or handle form data without page reloads.

Syntax

Following are the common syntaxes to prevent form submission

// Using event.preventDefault()
event.preventDefault();

// Using return false
return false;

// Using addEventListener with preventDefault
form.addEventListener('submit', function(e) {
   e.preventDefault();
});

Method 1 Using event.preventDefault()

The event.preventDefault() method cancels the default action that belongs to the event. When used in a form's onsubmit event handler, it prevents the form from submitting to the server.

Example

Following example demonstrates preventing form submission using event.preventDefault()

<!DOCTYPE html>
<html>
<head>
   <title>Prevent Form Submission - preventDefault</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Course Selection Form</h2>
   <form onsubmit="event.preventDefault(); showMessage();">
      <p>Select the subject you want to choose:</p>
      <div style="margin: 10px 0;">
         <input type="radio" id="prog" name="subject" value="prog">
         <label for="prog">Programming</label><br>
         <input type="radio" id="dev" name="subject" value="dev">
         <label for="dev">Web Development</label><br>
         <input type="radio" id="db" name="subject" value="db">
         <label for="db">Database</label>
      </div>
      <button type="submit" style="padding: 8px 16px; margin-top: 10px;">Submit</button>
   </form>
   <p id="message" style="color: green; font-weight: bold;"></p>

   <script>
      function showMessage() {
         document.getElementById("message").innerHTML = "Form submission prevented! No page reload occurred.";
      }
   </script>
</body>
</html>

When you select an option and click Submit, the form does not reload the page. Instead, a message appears confirming the prevention

Course Selection Form

Select the subject you want to choose:
? Programming
? Web Development  
? Database

[Submit]

Form submission prevented! No page reload occurred.

Method 2 Using return false

The return false statement in the onsubmit event handler also prevents form submission. This method is simpler but less flexible than preventDefault() because it stops all further event processing.

Example

Following example shows how to prevent form submission using return false

<!DOCTYPE html>
<html>
<head>
   <title>Prevent Form Submission - Return False</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>User Registration Form</h2>
   <form onsubmit="validateForm(); return false;">
      <div style="margin: 10px 0;">
         <label for="username">Username:</label><br>
         <input type="text" id="username" name="username" style="padding: 5px; width: 200px;">
      </div>
      <div style="margin: 10px 0;">
         <label for="email">Email:</label><br>
         <input type="email" id="email" name="email" style="padding: 5px; width: 200px;">
      </div>
      <button type="submit" style="padding: 8px 16px; margin-top: 10px;">Register</button>
   </form>
   <p id="status" style="color: blue; font-weight: bold;"></p>

   <script>
      function validateForm() {
         var username = document.getElementById("username").value;
         var email = document.getElementById("email").value;
         
         if (username && email) {
            document.getElementById("status").innerHTML = "Form validated! Submission blocked for demo purposes.";
         } else {
            document.getElementById("status").innerHTML = "Please fill in all fields before submitting.";
         }
      }
   </script>
</body>
</html>

The form performs validation but never submits, displaying status messages instead

User Registration Form

Username:
[text input field]

Email:
[email input field]

[Register]

Form validated! Submission blocked for demo purposes.

Method 3 Using addEventListener with preventDefault

For better separation of HTML and JavaScript, you can use addEventListener to attach the event handler programmatically. This approach is more flexible and follows modern JavaScript best practices.

Example

Following example demonstrates using addEventListener to prevent form submission

<!DOCTYPE html>
<html>
<head>
   <title>Prevent Form with addEventListener</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Contact Form</h2>
   <form id="contactForm">
      <div style="margin: 10px 0;">
         <label for="name">Name:</label><br>
         <input type="text" id="name" name="name" required style="padding: 5px; width: 250px;">
      </div>
      <div style="margin: 10px 0;">
         <label for="message">Message:</label><br>
         <textarea id="message" name="message" rows="4" required style="padding: 5px; width: 250px;"></textarea>
      </div>
      <button type="submit" style="padding: 8px 16px; margin-top: 10px;">Send Message</button>
   </form>
   <div id="result" style="margin-top: 20px; padding: 10px; background-color: #f0f8ff; border-radius: 5px; display: none;"></div>

   <script>
      document.getElementById('contactForm').addEventListener('submit', function(e) {
         e.preventDefault();
         
         var name = document.getElementById('name').value;
         var message = document.getElementById('message').value;
         
         var resultDiv = document.getElementById('result');
         resultDiv.style.display = 'block';
         resultDiv.innerHTML = '<strong>Form Data Captured:</strong><br>' +
                              'Name: ' + name + '<br>' +
                              'Message: ' + message + '<br><br>' +
                              '<em>Submission prevented - no server request made.</em>';
      });
   </script>
</body>
</html>

This example captures form data and displays it without submitting to a server

Contact Form

Name:
[John Doe]

Message:
[This is a test message]

[Send Message]

Form Data Captured:
Name: John Doe
Message: This is a test message

Submission prevented - no server request made.

Common Use Cases

Form submission prevention is commonly used in the following scenarios

Client-side validation Prevent submission until all required fields are properly filled and validated.
AJAX form handling Submit form data using AJAX instead of traditional page reload submission.
Multi-step forms Collect data across multiple steps before final submission.
Confirmation dialogs Show confirmation prompts before allowing form submission.
Custom data processing Transform or format data before sending to the server.

Comparison of Methods

Following table compares the different methods to prevent form submission

Method	Syntax	Use Case	Advantages	Disadvantages
event.preventDefault()	`event.preventDefault()`	Modern validation, AJAX forms	Flexible, allows other handlers, standard approach	Requires event object
return false	`return false`	Simple prevention, quick fixes	Simple syntax, immediate implementation	Stops all event processing, less control
addEventListener	`form.addEventListener`

AmitDiwan

Updated on: 2026-03-16T21:38:54+05:30

331 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next