Table of Contents
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> <html> <head> <title>Submit Form Using AJAX and jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="style.css" rel="stylesheet"> <script src="script.js"></script> </head> <body> <div id="mainform"> <h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here --> <div id="form"> <h3>Fill Your Information !</h3> <div> <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"> </div> </div> </div> </body> </html>
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.
$(document).ready(function(){
$("#submit").click(function(){
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;
if(name==''||email==''||password==''||contact=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(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.
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("my_db", $connection); // Selecting Database
//Fetching Values from URL
$name=$_POST['name'];
$email=$_POST['email'];
$password=$_POST['password'];
$contact=$_POST['contact'];
//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.
This tutorial showed you Ajax implementation with PHP, just follow my codes or download zip file to use.
Leave Your Comment Here