Submit Form without Page Reload using jQuery

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!

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.

• Download the file and place it in your project folder
• Use a CDN
• npm install jquery
• yarn add 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!

Check out a working CodePen example!

Visit our website at https://nightwolf.dev and follow us on Facebook and Twitter!