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.

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.

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.

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.

Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.
We hate spam. Your email address will not be sold or shared with anyone else.