Jquery, Ajax Form Submit with PHP,Mysql

submit-php-form-using-jquery-ajax

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

	
class="loading">
class="message">
<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

    src="js/jquery-3.1.0.js">
   
   
     type="text/javascript">
    $(document).ready(function() {
       var loader='';
       
	   
	   //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;
    });
}); 
 
 
 

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 .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s