DEV Community

Cover image for Submit Form without Page Reload using jQuery
nightwolfdev
nightwolfdev

Posted on • Updated on • Originally published at nightwolf.dev

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
});
Enter fullscreen mode Exit fullscreen mode

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.
});
Enter fullscreen mode Exit fullscreen mode

Select the Form

Let’s find the form in the DOM by using jQuery’s selector method.

$('form')
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

$('#contactForm')
Enter fullscreen mode Exit fullscreen mode

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) {

  });
});
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

Now let’s create that onSubmit function.

function onSubmit(event) {

}
Enter fullscreen mode Exit fullscreen mode

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();

}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
aarone4 profile image
Aaron Reese

2004 called. It would like it's blog post back 😃
In all seriousness though, if you need to be writing jQuery from scratch you will almost certainly be better off with one of the major frame works. For simple stuff Svelte or Vue called from a CDN and all housed in the single page; or learn it in vanilla js as a lot of the jQuery functionally is now native to ecmascript. GetElementById etc...

Collapse
 
nightwolfdev profile image
nightwolfdev

Because jQuery was so popular, it's still out there and good to know. This was meant for beginners who have never seen it.