Hello friends, welcome to my another small web application submit form without page refresh. In my previous blog I show you how to create Ajax File Upload with Progress Bar. Today I will create another small application with the help of ajax and jQuery. We use html form for every website to submit user data. After submit the form, page will refresh. It takes some time to submit the form. But we can bypass the page refresh using Ajax.

Ajax is a technology by which you can submit your data with out page refresh. Now for submit form without page refresh application, I create a simple contact form with name, email and message. You have to put your contact data into the form. After clicking “Send Mail” button the form data will go to a php page using ajax request from where the mail will transfer.




You need only three steps to create this application. First of all you need to make a HTML form.

Step1: Create HTML form markup

This is a very basic html form where I include a css file(style.css), jQuery main library(jquery-1.11.1.min.js) and send_data.js file where I wrote the form validation code and send data to a php file.

Step2: Create send_data.js form input field validation and send ajax request to the php file

All the jQuery code is well commented. So do not worry.

Create email_send.php where I put server side validation and php mail send code

Now you learn how to submit form without page refresh. You can use this application with any form.
Demo
Download

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Submit Form Without Page Refresh
Tagged on: