Submit Form without Page Reload using jQuery
March 6, 2021 • Javascript, jQuery • Published By Josh • 5 minute read
When submitting a form, the page will either be reloaded or the user will be navigated to another page. Instead of doing that, let’s learn how to submit a form without the page reloading using jQuery!
Table of Contents
- Form Example
- Form Action
- jQuery Installation
- Are you ready DOM?
- Select the Form
- Event Handler
- CodePen Example
Form Example
Let’s say we have a form that has three fields:
- First Name
- Last Name
- Email Address
Here is the HTML. It’s using some Bootstrap markup to add some styling.
<div class="container">
<form class="mt-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName">
</div>
<div class="form-group">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress" name="emailAddress">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Form Action
A typical form has an action attribute. The action attribute defines where to send the form data when the form is submitted. By the way, if no action attribute is defined, it will navigate to the same page the form is currently on.
<form method="GET" action="http://example.com">
After form submission, if the form method is GET or no method is defined, you’ll see that the form data actually gets added as arguments in the url in the form of name/value pairs. Each one is separated with an ampersand. If the form method was POST, the form data would NOT be added to the url.
http://example.com?firstName=John&lastName=Smith&emailAddress=johnsmith@domain.com
Instead of the user navigating to another url on form submission and seeing the form data added to the url, let’s learn how to submit the form without the page reloading!
jQuery Installation
There are various ways to install jQuery.
In most cases, you’re probably including it at the bottom of your page just before any other javascript that will use jQuery.
<script src="path/to/jquery"></script>
Are you ready DOM?
jQuery is really good at manipulating things on a web page. Think of a web page as a tree like structure where each piece is an object representing a part of the web page.
It’s called a Document Object Model (DOM). DOM methods provide programmatic access to the tree. That’s what jQuery has, it provides methods (functions) to manipulate the web page.
Before we can manipulate anything on the web page, we have to make sure the page has actually loaded its DOM. jQuery provides a ready function to do just that.
$(document).ready(function() {
// Do stuff here now that the DOM is ready.
});
The above syntax still works but it’s considered deprecated. The recommended way is below:
$(function() {
// Do stuff here now that the DOM is ready.
});
Select the Form
Let’s find the form in the DOM by using jQuery’s selector method.
$('form')
jQuery navigates through the DOM trying to find what you asked for. In this case, it’s looking for the form element. Keep in mind that if you had more than one form on the same page, it would select them all!
If you want to be more specific, you could add a unique id attribute to your form element.
<form id="contactForm">
Instead of looking for the generic form element, you can look for the unique id of contactForm.
$('#contactForm')
Event Handler
Now that we have the form selected, we need to listen for the submit event. We can use jQuery’s on function. In the below example, the first argument is the type of event to listen for. The second argument is a callback function.
$(function() {
$('form').on('submit', function(event) {
});
});
The callback function above is considered an anonymous function, meaning it has no name. I prefer to create named functions. We’ll create a function called onSubmit so let’s use that named function instead.
$(function() {
$('form').on('submit', onSubmit);
});
Now let’s create that onSubmit function.
function onSubmit(event) {
}
When the form is submitted, jQuery passes the submit event to the function as an argument. A form submit event will cause the page to reload and we want to prevent that. The event function called preventDefault can do that!
function onSubmit(event) {
// Prevent the default form submission event from happening.
event.preventDefault();
}
When the form is submitted, it will no longer reload the page! You can decide what to do with the form data from here!
For example, you can collect all the data in the form using jQuery’s serializeArray function. It will create an array of name/value pairs based on the form field name attributes.
var data = $(this).serializeArray();
Notice we used the keyword this. In the above scenario, it represents the form. We wrap it in a jQuery selector so we can use the serializeArray function on it!
CodePen Example
See the Pen Submit Form without Page Reload using jQuery by NightWolf Development (@nightwolfdev) on CodePen.