神刀安全网

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 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, jQuery validation,Ajax Signup, so let’s start.

Ajax Bootstrap Signup Form with jQuery PHP and MySQL

we will see

  • 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>   registered sucessfully, you may login now';         } else {                 $response['status'] = 'error'; // could not register    $response['message'] = '<span class="glyphicon glyphicon-info-sign"></span>   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" />   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>   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>   Sign Me Up');     $('#btn-signup').removeAttr('disabled');        });         }                   },3000);    },           error: function(){alert('Error!')}               });          return false;  }

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Ajax Bootstrap Signup Form with jQuery PHP and MySQL

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址