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.

21 Comments

  1. Thanks for the tutorial. I live in Brazil.
    Javed…
    I followed the guidelines as you mentioned. but is returning the following error:
    “Warning: mail () [function.mail]: SMTP server response: 530 5.7.0 Must issue a STARTTLS command first. V1sm34006057qkj.19 – gsmtp in C: \ Program Files (x86) \ EasyPHP-5.3.2 \ www \ ajax.php online 21
    Sorry! Your form submission is failed. ”
    I am using EasyPhp 5.3.2 local server.
    Thank you in advance.

  2. Javed ji, I stuck with a problem. My search.php page having two buttons, one button for fetching data from two different dates and other one for deleting particular unwanted record. I have placed value “value=”” for search button which retains the entered values even after submission. Coming to delete button, all data fetched is vanishing after submission of the delete button. Deleting the record is working but I want to show the user the remaining records after delete. Kindly guide me sir.

    1. I will suggest you to learn AJAX with more examples. If you want to show data after deleting some data so first you will need to delete data and then get the remaining data using MySQL query, you will need to perform this all using AJAX, i have created an example here to submit form without refresh page using ajax and jQuery, i think you should try to learn more example how to use ajax to get the data. Such as you can also check my tutorial here https://www.allphptricks.com/dynamic-dependent-select-box-using-jquery-and-ajax/ i explain how to work with dynamic dependent selectbox, this is another example of ajax. Hope this help you.

  3. What i don’t understood is actually how you’re now not really much more well-liked than you may
    be right now. You’re so intelligent. You already know thus considerably with regards to this topic, made
    me in my view consider it from so many various angles. Its like men and women don’t seem
    to be fascinated unless it’s something to accomplish with Lady gaga!
    Your personal stuffs excellent. At all times handle it up!

  4. Hi,

    Thanks for the tutorial!

    I would like to send email using PHPMailer can you please guide me.

    How it should integrate in current tutorials.

    Please advice!

    Regards,
    Viren

  5. Everything is very open with a very clear clarification of
    the challenges. It was truly informative. Your website is very
    useful. Thank you for sharing!

  6. 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 *