- Trending Categories
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 refreshing the page on submit in JavaScript?
In this tutorial, we shall learn to stop form refreshing the page on submitting in JavaScript.
Let’s cover the methods to accomplish this objective.
Using event.preventDefault() to stop page refresh on form submit
In this section, we will see how to use event.preventDefault() to stop page refresh on form submission. The event.preventDefault() restricts the default page refresh behavior of the form during form submission.
Users can follow the syntax below to try this method.
Syntax
<form id="formId"> <input type="text" value=="value"/> <input type="submit"/> </form>
The syntax defines the form.
//Get form element
var form=document.getElementById("formId");
function submitForm(event){
//Preventing page refresh
event.preventDefault();
}
//Calling a function during form submission.
form.addEventListener('submit', submitForm);
The syntax adds an event listener to the form submission event. The callback function invokes the event.preventDefault() method that prevents the page refresh.
Example
In this example, the form contains two input fields. When the user clicks the submit button, the event handler callback function starts execution. The form submission and prevention of page refresh happen immediately.
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>event.preventDefault()</i></h2>
<form id="formId">
Name: <input type="text" name="name" required/><br><br> Email: <input type="email" name="email" required/><br><br>
<input type="submit" value="Submit!" />
</form>
<p id="opTag"></p>
<script>
var form = document.getElementById("formId");
var opTag = document.getElementById("opTag");
function submitForm(event) {
event.preventDefault();
form.style.display = "none";
opTag.innerHTML = "<b>Form submit successful</b>";
}
form.addEventListener('submit', submitForm);
</script>
</body>
</html>
Using “return false” to stop page refresh on form submit
In this section, we will see how to use "return false" to stop page refresh on form submission. The "return false" cancels the page refresh.
Users can follow the syntax below to try this method.
Syntax
<form onsubmit="jsFunction();return false"> <input type="checkbox" value="value"> <input type="submit"/> </form>
The syntax calls a JavaScript function on the form submission action. The "return false" follows the function call.
Example
In this example, two checkboxes are the form input fields. The form has the submit event callback function and the return "false” statement.
The "return false" statement removes the page refresh on form submission. The submit button goes off, and the page displays a successful form submission upon user request.
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>return false</i></h2>
<form id="retForm" onsubmit="submitFormReturn();return false;">
<input type="checkbox" id="bike" name="bike" value="Bike">
<label for="bike">Egan likes bike</label><br>
<input type="checkbox" id="car" name="car" value="Car">
<label for="car">Egna likes car</label><br><br>
<input type="submit" value="Submit">
</form>
<p id="retOp"></p>
<script>
var retForm = document.getElementById("retForm");
var retOp = document.getElementById("retOp");
function submitFormReturn(event) {
retForm.style.display = "none";
retOp.innerHTML = "<b>Form submit successful</b>";
}
</script>
</body>
</html>
Using Ajax form submit to stop page refresh on form submission
In this section, we will see how to use ajax form submit to stop page refresh on form submission. The ajax form submission is a different way to submit the form without a page refresh.
Users can follow the syntax below to try this method.
Syntax
<form id="ajxForm" onsubmit="submitFormAjax();"> <input type="text" value="value"> <input type="submit"/> </form>
The syntax defines a form with submitting callback function that performs the form submission.
//Get the form data
var data=new FormData(document.getElementById("formId"));
//Create XMLHttpRequest
var xhr=new XMLHttpRequest();
//Open the connection and send the data to the server
xhr.open("POST", "SERVER-SCRIPT");
xhr.send(data);
//Avoids default form submit
return false;
The syntax reads the form element and opens up an xhr connection. Then sends the form data to the server by blocking the default form submit action.
Example
A candidate form sample with four text fields is available in this example. The form submission event function reads this form, creates an XMLHttpRequest, and starts a connection to send the data to the server.
The "return false" statement at the end of the function definition stops the default form submission, and the ajax form submission takes place.
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>ajax form submit</i></h2>
<form id="ajxForm" onsubmit="submitFormAjax();">
<fieldset style="background: lightgrey; border: 5px solid #000;">
<legend>Candidate Data</legend>
<input type="text" name="firstname" placeholder="First name"><br/><br/>
<input type="text" name="lastname" placeholder="Last name"><br/><br/>
<input type="text" name="email" placeholder="Email"><br /><br/>
<input type="text" name="phone" placeholder="Phone"><br /><br/>
<input type="submit" value="Submit">
</fieldset>
</form>
<script>
function submitFormAjax(event) {
var ajxForm = document.getElementById("ajxForm");
var data = new FormData(ajxForm);
var xhr = new XMLHttpRequest();
xhr.open("POST", "");
xhr.send(data);
xhr.onload = function() {
alert("Submitted");
};
return false;
}
</script>
</body>
</html>
Using fetch API form submit to stop page refresh on the form submission
In this section, we will see how to use the fetch API form submit to stop page refresh on form submission. The fetch API form submission is another way to submit the form without a page refresh. The page rerenders after the ajax form submits.
Users can follow the syntax below to try this method.
Syntax
<form id="fetchForm" onsubmit="submitFormFetch ();"> <select> <option value="value"></option> <input type="submit"/> </form>
The syntax has a form with submit function call to perform the fetch API form submission.
//Get the form
var data=new FormData(document.getElementById("formId"));
//Use fetch syntax to submit the form data
fetch("SERVER-SCRIPT", { method: "post", body: data });
//Stop default form submit action
return false;
The syntax reads the form data and submits it using the fetch API by halting default form submission.
Example
In this example, try the select drop-down as the input field. The form has the submit function that fetches the Form Data and submits it. The "return false" statement at the end of the function stops the form submit action by default. Observe that the page rerenders after the fetch API form submit.
<html>
<body>
<h2>Program to stop form refreshing page on submit in JavaScript using <i>fetch form submit</i></h2>
<form id="fetchForm" onsubmit="submitFormFetch();">
<label for="city">RaceCourse:</label>
<select name="racecourse" id="racecourse">
<option value="ascot">Ascot</option>
<option value="belmont">Belmont</option>
</select><br><br>
<input type="submit" value="Submit!" />
</form>
<script>
function submitFormFetch(event) {
var fetchForm = document.getElementById("fetchForm");
var data = new FormData(fetchForm);
fetch("", {
method: "post",
body: data
})
.then((res) => {
return res.text();
})
.then((txt) => {
alert("Submit Success");
})
.catch((err) => {
alert(err);
});
return false;
}
</script>
</body>
</html>
This tutorial taught us four ways to stop form refreshing the page on submit. The preventDefault() and "return false" methods are for stopping page refresh on default form submit. The ajax method and fetch API method are alternative methods for form submission without page refresh.
77K+ Views
