Ajax Bootstrap Signup Form with jQuery PHP and MySQL

hello friends, this is my continuation post of previous tutorial, well the previous is just a creating bootstrap signup form along with validation and now in this tutorial we will see Creating Bootstrap Form with Ajax jQuery PHP and MySQL., we already have ajax registration tutorial but that was simple for beginners and this one goes advance, we will see live email availability, Live jQuery validation, and signup process will goes silently without page reload. before proceed you can check the live demo of this tutorial to see how it goes, so let's get started.

• How to use Remote rule in jQuery Validation
• Live Email Availability check
• jQuery Ajax JSON Response
• Ajax Signup

In previous tutorial we already covered creating a responsive bootstrap form with validation so i am going to skip the bootstrap form and explaining the above defined title.

Database Table

the database name i have used here is ajax-submit, so create database and copy/paste following sql code into your phpmyadmin to store user details.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `email` varchar(60) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

config.php

simpel database configuration file created with PDO extension.

<?php

 define('DBhost', 'localhost');
 define('DBuser', 'root');
 define('DBPass', '');
 define('DBname', 'ajax-submit');
 
 try{
  
  $DB_con = new PDO("mysql:host=".DBhost.";dbname=".DBname,DBuser,DBPass);
  
 }catch(PDOException $e){
  
  die($e->getMessage());
 }

ajax-signup.php

simpel php file contains only php code which inserts and creates new user record and store it into mysql table, it will give JSON response as an output. $response = array(); contains json string as status and message. whatever it returns it will be in JSON format.

<?php

 header('Content-type: application/json');

 require_once 'config.php';
 
 $response = array();

 if ($_POST) {
  
  $name = $_POST['name'];
  $email = $_POST['email'];
  $pass = $_POST['cpassword'];
  
  $stmt = $DB_con->prepare('INSERT INTO users(name,email,password) VALUES(:name, :email, :pass)');
  $stmt->bindParam(':name', $name);
  $stmt->bindParam(':email', $email);
  $stmt->bindParam(':pass', $pass );
  $stmt->execute();
  
  // check for successfull registration
        if ($stmt->rowCount() == 1) {
   $response['status'] = 'success';
   $response['message'] = '<span class="glyphicon glyphicon-ok"></span> &nbsp; registered sucessfully, you may login now';
        } else {
   
            $response['status'] = 'error'; // could not register
   $response['message'] = '<span class="glyphicon glyphicon-info-sign"></span> &nbsp; could not register, try again later';
        } 
 }
 
 
 echo json_encode($response);

Remote Rule

Here's how you can use Remote Rule within jQuery Validation Rules, it will call "check-email.php" file silently and returns true/false.

email : {
 required : true,
 validemail: true,
 remote: {
  url: "check-email.php",
  type: "post",
  data: {
   email: function() {
   return $( "#email" ).val();
          }
         }
 }
},

Ajax Signup Code

if there is no validation error the submithandler call the submitForm() function, the function contains ajax method which calls the "ajax-signup.php" page as POST request and print JSON response within div tag and shows as slideDown effect.

function submitForm(){
      
   $.ajax({

      type : 'POST',
      async: false,
      url  : 'ajax-signup.php',
      data : $('#register-form').serialize(),
      dataType : 'json',
      success : function(data){
                
  console.log(data);
          
  $('button').html('<img src="ajax-loader.gif" /> &nbsp; signing up...').attr('disabled', 'disabled');
          
  setTimeout(function(){
           
  if ( data.status==='success' ) {
       
       $('#errorDiv').slideDown(200, function(){
             $('#errorDiv').html('<div class="alert alert-info">'+data.message+'</div>');
       $('#errorDiv').delay(3000).slideUp(100);
       $("#register-form")[0].reset();
       $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
          $('#btn-signup').removeAttr('disabled');
     });
    } else {
       $('#errorDiv').slideDown(200, function(){ 
    $('#errorDiv').html('<div class="alert alert-danger">'+data.message+'</div>');
    $('#errorDiv').delay(3000).slideUp(100);
    $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
    $('#btn-signup').removeAttr('disabled');
       });
        }
  
               },3000);
   },
          error: function(){alert('Error!')}      
        }); 
        return false;
 }