add ajax form

Add Ajax Form to your site – Ajax & JavaScript Tutorial

With Ajax Form submission, make your form reliable.

It does not look nice when somebody submits a form on your site and page refreshed. You can also find some sites where form in submitted without page reload. Such type of form is known as Ajax form.

It’s not a hard deal to make your contact form or subscription form to an ajax form. You all need to know basic JavaScript and PHP.

Simple HTML Form

Forms are used to collect information from users. You can use a form for Contact, comments, subscription and much more. But with simple HTML form, the page is reloaded when a form is submitted by a user.

When a user fills a form and submits it. The page is reloaded. As it is not good. The whole page is reloaded again. It’s also time-consuming as well as irritating. If you refresh the page after form submission, page asks for form submit.

What to do?

As describe above, dealing with simple HTML form is not a good idea. So should you do to get rid of these problems?

Ajax Form is the answer.

Yes, these issues can be handled with ajax form. Which is not a big deal. You have just know about basic Javascript. If not, simply follow this tutorial.

What Is Ajax?

AJAX stands for Asynchronous JavaScript and XML. Ajax is the art of exchanging data with a server, and updating parts of a web page – without reloading the whole page On some site, like Facebook, when you submit a comment. It just posted without page refresh. It’s the magic of Ajax. Using Ajax we can submit and fetch information, which calls on another page.

Here I am not going to in depth. In simple word, Ajax is used to communicate with server-side scripts without page reload. Using Ajax, we can fetch data from another page’s script. And send information to another page as we do in forms. Using an Ajax Form we can submit input information to another page. Where related code is written.

Creating an Ajax Form

Now, I am starting my tutorial to create an Ajax Form in a simple way. For this you must have a database in MySql . Here, we have database named “my_db” which consists of table named “users” with 5 fields viz. “id”, “name”, “email”, “password” and “contact”. You can use your fields.

The HTML part, Our Ajax form

Create an HTML file. Name it ajax-form.html and copy below code in it.

<!DOCTYPE html>
<title>Submit Form Using AJAX and jQuery</title>
<script src=""></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
<div id="mainform">
<h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here -->
<div id="form">
<h3>Fill Your Information !</h3>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<label>Contact No :</label>
<input id="contact" type="text">
<input id="submit" type="button" value="Submit">

Please make sure that you have added jQuery library file. As JavaScript runs only with this.

The Ajax Form Script part

Please script.js file in your folder. And add below Ajax Form script in it.

var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name='+ name + '&email='+ email + '&password='+ password + '&contact='+ contact;
alert("Please Fill All Fields");
// AJAX Code To Submit Form.
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
return false;

Let’s explain the Ajax form script. Firstly we have to get values of each field in JavaScript variable. And then save them in getting URL form. Which will be further explained. Check whether any field is not empty.

Now Ajax part, it has some part. I explain them one by one.

  • Type: It tells about the method in which our data will send.
  • URL: It is the URL of the file where data will send.
  • data: Data String that will send.
  • success: It contains a JavaScript function, which will be executed when Ajax Form is submitted successfully.

PHP part

Please make ajax-submit.php file in your folder. And Copy below code.

$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("my_db", $connection); // Selecting Database
//Fetching Values from URL
//Insert query
$query = mysql_query("insert into users(name, email, password, contact) values ('$name', '$email', '$password','$contact')");
echo "Form Submitted Succesfully";
mysql_close($connection); // Connection Closed

This is the file where the form will be submitted. As in Ajax function, we add type post the dataString get here as post method. Saving them in the database table. Here we echo Form Submitted Successfully“. It will result success function. When form is submitted successfully, page will give alert.

Download Source Code

This tutorial showed you Ajax implementation with PHP, just follow my codes or download zip file to use.

Subscribe to this blog to get latest post direct into your inbox.

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.