Submit Form without Page Reload using jQuery
Tags: javascript, jquery, beginners, webdev
Published: 2021-03-09 22:44:00

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](https://getbootstrap.com/) markup to add some styling.

```html
<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.

```html
<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&amp;lastName=Smith&amp;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](https://jquery.com/).

* [Download](https://jquery.com/download/) the file and place it in your project folder
* Use a [CDN](https://cdnjs.com/libraries/jquery/)
* 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.

```html
<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](https://api.jquery.com/ready/) function to do just that.

```javascript
$(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:

```javascript
$(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.

```javascript
$('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.

```javascript
<form id="contactForm">
```

Instead of looking for the generic form element, you can look for the unique id of **contactForm**.

```javascript
$('#contactForm')
```

## Event Handler

Now that we have the form selected, we need to listen for the submit event. We can use jQuery’s [on](https://api.jquery.com/on/) function. In the below example, the first argument is the type of event to listen for. The second argument is a callback function.

```javascript
$(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.

```javascript
$(function() {
  $('form').on('submit', onSubmit);
});
```

Now let’s create that onSubmit function.

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) can do that!

```javascript
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](https://api.jquery.com/serializearray/) function. It will create an array of name/value pairs based on the form field name attributes.

```javascript
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](https://codepen.io/nightwolfdev/pen/MWbBEya)!

---
**Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!**