Article Categories

Selected Reading

How to stop form submission using JavaScript?

Javascript Server Side Programming Programming

In this tutorial, we will see the methods to stop form submission using JavaScript. Generally, the HTML form by default submits automatically when certain events are triggered. The automatic submission causes the browser to refresh and reload the whole page, which we don't want in some cases. To perform any operation before submission, we need to change the default behavior of the form to prevent it from submitting.

Following are the methods we can use to stop form submission:

Using the "return false" value
Using the preventDefault() method

Let us discuss both of them one by one with code examples.

Using the "return false" Value

We can stop the form from submission by giving the "return false;" value to the onsubmit event. This value makes the form return nothing and prevents it from submission as well as refreshing the browser.

Syntax

Following syntax is used to stop the submission of the form using the return false value:

<form onsubmit="return false;">
   // content of form tag
</form>

Example

The below example will illustrate the use of the onsubmit event and the return "false" value:

<!DOCTYPE html>
<html>
<body>
   <h3>Stop form submission using JavaScript?</h3>
   <form onsubmit="return false;">
      <input type="text" placeholder="Enter some text">
      <p id="result">Button is not clicked yet!!</p>
      <button type="button" onclick="display()">Change above text</button>
      <button type="submit">Submit (Won't work)</button>
   </form>
   <script>
      function display() {
         let result = document.getElementById("result");
         result.innerHTML = "<b>The button is clicked and form is not submitted yet.</b>";
      }
   </script>
</body>
</html>

In this example, we change the text just above the button by pressing the button to show that neither the form is submitted nor the browser is refreshed while performing some activity before form submission.

Using the preventDefault() Method

In JavaScript, we are provided with an in-built preventDefault() method that is used to stop the submission of the form and prevent the browser from refreshing while performing some task.

There are two ways in which we can use the preventDefault() method to stop form submission:

By using it as a value to onsubmit event
By using it inside the callback function of the event

Let us understand both of them in detail.

By Using it as a Value to onsubmit Event

We can pass the event.preventDefault() method as the value to the onsubmit event as we did in the previous method where we were passing return false; as the value.

Syntax

<form onsubmit="event.preventDefault();">
   // content of the form tag
</form>

Example

Below code is the practical implementation of the event.preventDefault() method:

<!DOCTYPE html>
<html>
<body>
   <h3>Stop form submission using JavaScript? </h3>
   <form onsubmit="event.preventDefault();">
      <input type="text" placeholder="Enter some text">
      <p id="result">Button is not clicked yet!!</p>
      <button type="button" onclick="display()">Change above text</button>
      <button type="submit">Submit (Won't work)</button>
   </form>
   <script>
      function display() {
         let result = document.getElementById("result");
         result.innerHTML = "<b>The form is secured from submission using the preventDefault() method.</b>";
      }
   </script>
</body>
</html>

In the above example, we have passed the event.preventDefault() as the value to the onsubmit event that is responsible for stopping the form submission as well as the browser refreshing.

By Using event.preventDefault() Inside a Callback Function

In this method we do not need to use the onsubmit event. Instead we can use the preventDefault() method inside the callback function of any event which we want to make active before submission of the form.

Syntax

function callback(event){
   event.preventDefault();
}

Example

Below code will explain how to use preventDefault() inside the callback function of the event:

<!DOCTYPE html>
<html>
<body>
   <h3>Stop form submission using JavaScript?</h3>
   <form id="myForm">
      <input type="text" placeholder="Enter some text">
      <p id="result">Form is ready to submit!!</p>
      <button type="submit">Submit</button>
   </form>
   <script>
      document.getElementById("myForm").addEventListener("submit", function(event) {
         event.preventDefault();
         let result = document.getElementById("result");
         result.innerHTML = "<b>The form is secured from submission using preventDefault() inside callback function.</b>";
      });
   </script>
</body>
</html>

In this example, we defined an event listener for the form's submit event. The callback function uses event.preventDefault() to prevent the browser from refreshing and the form from submission. When the submit button is clicked, the event is triggered and the function executes.

Comparison

Method	Usage	Best For
`return false`	Inline onsubmit attribute	Simple cases, quick implementation
`event.preventDefault()`	Inline or callback functions	Modern JavaScript, better control

Conclusion

Both return false and event.preventDefault() effectively stop form submission. Use preventDefault() for modern JavaScript development as it provides better control and follows best practices.

Abhishek

Updated on: 2026-03-15T23:18:59+05:30

63K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next