Submit Form Without Page Refresh Using Ajax, jQuery and PHP

Demo Download

In this tutorial, i will explain how to submit contact form without page refresh using AJAX, jQuery and PHP. We all have seen that when we submit any web form or contact form, it takes few seconds to submit without refreshing the web page.

AJAX has the ability to submit form without page refresh. We will also use AJAX here along with jQuery and PHP. Although you can do anything with the form submission, in here we will send a simple email to website admin.

Steps to Creating Submit Form Without Page Refresh Using Ajax, jQuery and PHP

To create a user friendly contact form we will need to follow the below steps:

  1. Create a HTML Form Page
  2. Include Bootstrap Library
  3. Include jQuery Library
  4. jQuery Form Validation & AJAX Method
  5. Create an AJAX Action Page

1. Create a HTML Form Page

First we will create a simple contact form to get information from user. Create a page with name index.php  and paste the below code in it. We are getting following information.

Name, Email and Message

After the simple contact form, we also created an empty div having class  message_box, we will use this div to display all errors and successful message.

2. Include Bootstrap Library

To give it simple and quick style we are using here Bootstrap library, so lets include Bootstrap library in the head section of your web page.

3. Include jQuery Library

Since we will be using jQuery and AJAX therefore we need to include jQuery Library before closing of  </body> tag.

You can download the both library files from the download button which is available in the beginning and bottom of this tutorial.

4. jQuery Form Validation & AJAX Method

Now we also need to validate our web form data, so we will make sure that all input fields are filled and entered email address is valid. After that we will also use AJAX method to submit form without refreshing the page.

Email Verification Function

As you can see in the above script that we are doing simple validation, it is very simple script which is just checking if name is empty then focusing its cursor on name field, and also showing error in the .message_box div, same we are doing for email and for message fields. We are additionally checking email that is it valid or not by using the above  isValidEmailAddress()  function.

When all fields are filled out and user press submit button, AJAX sends the all input fields data to ajax.php page which will simply send the email to the web admin.

5. Create an AJAX Action Page

Create a page with name ajax.php, this will send email to web admin using simple PHP mail function. Although the prefer way to send email in PHP using PHPMailer but i am using here mail function to keep this tutorial simple, i will suggest you all use PHPMailer. Copy and paste the below script in  ajax.php

Make sure to change your email in the above script in variable $to = "youremail@yourdomain.com";

I hope you all can implement this contact form easily on your website, if anyone still have any problem then you can leave your problem in the below comment section.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook.

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

4 Comments

  1. Do you mind if I quote a few of your articles as long as I
    provide credit and sources back to your blog? My blog site is in the exact same area of
    interest as yours and my visitors would really benefit from a lot of
    the information you provide here. Please let me know if this okay with you.
    Regards!

Leave a Reply

Your email address will not be published. Required fields are marked *