Ajax form submission is better and fast way to submit form without page loading .It’s make a nice experience to your users.
Below we have written a tutorial on how to
submit a form with jquery ajax . You can also consider this as a
PHP, ajax registration form .
First of all we have to create a html file ,with below html codes
<div class="loading"></div>
<div class="message"></div>
<form id="register_form" >
<table width="98%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Email </td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>Contact </td>
<td>
<input type="text" name="contact">
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td> </td>
<td><input id="submit" type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
Above we have a form to get user data . There also 2 div containing classes loading and message for handling loader images show and success message display .
Now include your jquery file and put below code above the html as shown below
<script src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var loader='<img src="images/ajax-loader.gif" />';
//if submit button is clicked
$('#submit').click(function () {
//show the loader
$('.loading').html(loader).fadeIn();
var name = $('input[name=name]').val();
var email = $('input[name=email]').val();
var password = $('input[name=password]').val();
var contact = $('input[name=contact]').val();
var address = $('input[name=address]').val();
//organize the data properly
var form_data =
'name='+name+
'&email='+email+
'&password='+password+
'&contact='+contact+
'&address='+address;
//disabled all the text fields
$('.text').attr('disabled','true');
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "ajax/process.php",
//POST method is used
type: "POST",
//pass the data
data: form_data,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('#register_form').fadeOut('slow');
//hide the loader
$('.loading').fadeOut();
//show the success message
$('.message').html('Successfully Registered ! ').fadeIn('slow');
//if process.php returned 0/false
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
</script>
Above we have stored ajax loader image on a variable ‘loader’.
When user click submit button we have shown this loader to the div class ‘loading’ .
Then we read all user’s entered data to variables name, email, password, contact, address .
we have created an ajax request to send user’s entered data to a file ‘ajax/process.php’ and handle it’s output .
If output 1 , we have considered success .So, fade out the form ,loader and shown message to div class ‘message’ .
Now , lets create a folder ‘ajax’ the file ‘process.php’ in it .
<?php
include "../includes/config.php"; //include the DB config file
//Retrieve form data.
$name=$_POST['name'];
$email=$_POST['email'];
$password=$_POST['password'];
$contact=$_POST['contact'];
$address=$_POST['address'];
//insert it to database and and echo 1 for success
$mysqli->query("INSERT INTO members (name,email,password,contact,address) VALUES('$name','$email','$password','$contact','$address') ");
if($mysqli->error){
echo $mysqli->error;
}else{
echo '1';
}
?>
We have a database config file as shown below
<?php
$mysqli=new mysqli('localhost','root','','b239jq');
if($mysqli->connect_error){
echo $mysqli->connect_error;
}
?>
We just included Database config file , read user’s data in post method , finally inserted it to db table then echo .
I think this tutorial will guide you for jquery, ajax form submission with PHP,Mysql Database . If you have any query ,do write it in below comments .I try my best to
reply all your questions .
