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.
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.
What Is Ajax?
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.
<title>Submit Form Using AJAX and jQuery</title>
<link href="style.css" rel="stylesheet">
<h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here -->
<h3>Fill Your Information !</h3>
<input id="name" type="text">
<input id="email" type="text">
<input id="password" type="password">
<label>Contact No :</label>
<input id="contact" type="text">
<input id="submit" type="button" value="Submit">
The Ajax Form Script part
Please script.js file in your folder. And add below Ajax Form script in it.
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;
alert("Please Fill All Fields");
// AJAX Code To Submit Form.
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.
Please make ajax-submit.php file in your folder. And Copy below code.
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("my_db", $connection); // Selecting Database
//Fetching Values from URL
$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.
How useful was this post?
Click on a star to rate it!
Average rating / 5. Vote count:
We are sorry that this post was not useful for you!
Let us improve this post!
Thanks for your feedback!