How to submit AJAX Forms using jQuery

AJAX stands for Asynchronous JavaScript and XML. It works by sending asynchronous requests and by doing this it permits an application to reload a part of a page without updating the entire document. This tutorial focuses on the submission of AJAX forms and will serve as a guide for anyone having problems in submitting AJAX forms.

In this tutorial we will be using jQuery to submit AJAX forms. Let’s see how.

1. Create the frontend

We will create the frontend using HTML. In the following piece of code we are creating a simple form. We created two input fileds. The first input field takes in the user name and the second input field requires the email address of the user.

We have included the id values to each input field because jQuery script uses these to process the form.

<!DOCTYPE html>



<title>How to Submit AJAX Forms using jQuery</title>

<script src="<a href=""></a>" />



<div class="form">

<h1>AJAX Form</h1>

<form action= "process.php" method= "POST">

<input type= "text" id= "name" name= "name" placeholder="Full Name" />

<input type= "text" id= "email" name= "email" placeholder="email" />

<button type= "submit" class= "btn">Submit Form</button>





2. Adding jQuery logic

Now we will use jQuery logic. Without jQuery sending AJAX requests can be a bit tricky but with jQuery the task becomes a little bit easy. With jQuery AJAX methods you can easily load your data from the selected HTML elements of your web page.

The following code extracts data from the input fields which are name and email. Afterwards an AJAX request is made and the response is displayed.

$(document).ready(function ( ) {
$("form").submit(function (event) {
varformData = {
      name: $("#name").val(),
      email: $("#email").val(),

    url: "process.php"
    Data: formData,
dataType: "json"
    encode: true,
   }).done(function (data) {


Forms are a crucial part of a website and AJAX allows a user to refresh a part of a page without going through the difficulty of refreshing the entire document. An AJAX form is capable of sending and receiving information in different formats like, HTML, JSON or XML. This tutorial gives the reader a step-by-step guidance to creating and submitting an AJAX form using jQuery.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.