Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to stop form submission using JavaScript?
In this tutorial, we will see the methods to stop form submission using JavaScript. Generally, the HTML form by default submitted automatically if we try to perform some operations by using some events. The automatic submission of the form leads the browser to refresh and reload the whole page again, which we don’t want to perform in some cases. So, to perform any operation before submission we need to change the default behavior of the form to prevent it from submission.
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. Giving this value to the event makes the form return nothing and prevent 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>
Algorithm
Step 1 − In the very first step, we will define a form tag in the HTML document and give it an onsubmit event with a return false; value as shown in the above syntax.
Step 2 − In the next step, we can define the operation we want to perform before submission of the form.
Step 3 − In the third step, we will prove our point to the user that the form is not submitted by updating some text without refreshing the browser.
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">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</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 the user 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 also to prevent the browser from refreshing itself while performing some task.
There are two ways in which we can use the preventDefault() method to stop the 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 of it.
Syntax
The following syntax is used to assign an event.preventDefault value to the onsubmit event −
<form onsubmit="event.preventDefault();"> //content of the form tag </form>
Let us see a practical implementation of the same with help of program examples.
NOTE − The algorithm of this and the above method is almost the same. You just need to change the value of the onsubmit event in the previous example from "return false" to the event.preventDefault();.
Example
Below code is the practical implementation of the method we discussed above i.e. event.preventDefault() method −
<!DOCTYPE html>
<html>
<body>
<h3>Stop form submission using JavaScript? </h3>
<form onsubmit="event.preventDefault();">
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</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 the event which we want to make active before submission of the form.
Syntax
Following syntax shows how we can use prventDefault() inside callback function −
function callback(event){
event.preventDefault()
}
Algorithm
Step 1 − The first step will involve defining the form tag and the other essentials in the HTML document.
Step 2 − In this step, we will define the callback function for the event and uses the event.preventDefault inside it as shown in the above syntax.
Step 3 − In the third step, we simply assign the function to the event which invokes the function when it is triggered.
Let us understand it with help of the program example.
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>
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</button>
</form>
<script>
function display() {
event.preventDefault();
let result = document.getElementById("result");
result.innerHTML = "<b>The form is secured from submission using the preventDefault() method inside callback function.</b>"
}
</script>
</body>
</html>
In this example, we defined the display() function with the event.preventDefault() used inside it which secures the browser from refreshing and form from submission. After defining the function, we assigned it to the onclick event associated with the button tag, which triggers the event by pressing the button and invokes the function at the same time.
In this tutorial, we have learned the methods to stop the form submission using JavaScript and understand all of them with their practical implementation using code examples that show the use of these methods as well as proving that the operations are performed before submission of the form.
44K+ Views
