Ajax Bootstrap Signup Form with jQuery PHP and MySQL | Coding Cage

Ajax Bootstrap Signup Form with jQuery PHP and MySQL

By
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.
Ajax Bootstrap Signup Form Example 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> &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;
 }



41 comments:

  1. My friend, thanks for sharing your experiences, it helps me learn more about web programming.
    what I want is a login form that fits this registration system jQuery.

    ReplyDelete
    Replies
    1. hello rildo, there is ajax login script i have already published, please go through all the tutorials...

      Delete
  2. thank you pradeep, for this tutorial, i was looking for the same and landed here.
    thanks , keep posting .

    ReplyDelete
  3. You don't appear to be encrypting the password at all in this example, storing plaintext passwords in the database is a very very bad idea, use either pbkdf2 or bcrypt for that.

    Also sending back JSON responses with HTML snippets that contain layout code and CSS classes doesn't make a very re-usable API and ties the API to the front end and is not really the correct place where layout code belongs.

    ReplyDelete
    Replies
    1. hello there, well i have just covered here creating ajax signup form with bootstrap design along with jquery validation and we already have login/signup tutorials with password encryption, and this is simple snippet it's easy to encrypt password you just need to add hashing functions, that's it.. BTW thanks for the suggestion ....

      Delete
  4. Pradeep, thank you for your tutorials.
    This script does not pass email validation and allows to post new records with the same e-mail address. The script in your previous tutorial works perfect. (http://www.codingcage.com/2015/11/ajax-registration-script-using-jquery-php.html)
    Regards,
    Andrey

    ReplyDelete
    Replies
    1. Hello there, this one is also working perfectly, did you make some changes in it, if so then let me know ?

      Delete
  5. Please can you build students results checking portal too?

    ReplyDelete
  6. Thank you for sharing the source code...keep posting bro
    I hope you always post with source code


    Belajar PHP

    ReplyDelete
  7. Hi.
    It would be great if you put a button "DEMO" on your examples.

    ReplyDelete
    Replies
    1. Hi, Arslan, i'll publish demo of this tutorial, very soon ...

      Delete
  8. I love the information you present here and can’t wait to share it my friends. http://goo.gl/Qku3fK

    ReplyDelete
  9. hi i want to download this script i already subcribe you but when i try to download error email not found please subcribe but already subcribe

    ReplyDelete
    Replies
    1. Hello junaid, you can download the code now ...

      Delete
    2. no i cant download the file

      Delete
  10. i cant download the code also

    ReplyDelete
  11. i cant download the code also

    ReplyDelete
  12. xalexbehx@hotmail.com
    this is what i already subscrip dont know why still cant download the code plz help me sir

    ReplyDelete
  13. Replies
    1. it is in zip file, please download ...

      Delete
  14. Hey I want to download this script, I have already subscribed but when I try to download it an error pops up that my email is not found please subscribe

    ReplyDelete
  15. hey i want to download the script but i get an error that my email is not found. I have already subscribed.

    ReplyDelete
  16. hey sir why i cant download this tutorial?

    ReplyDelete
    Replies
    1. hello karl, you can download the code...

      Delete
  17. can you make a log in form(with login.html ) on this signup tutorial? I'm new to ajax.. I'm trying to link your other login tutorial to this signup tutorial but it won't work I don't know what to do.
    :( please help me.. great tutorials btw :)

    ReplyDelete
  18. thanks for sharing,
    What I want is a login form that fits this system. Try to do but I can not.

    ReplyDelete
  19. do you have any tutorial on jquery datepicker and save selected date into mysql database?

    ReplyDelete
  20. do you have a tutorial on how to add jquery date picker and save date into mysql database?

    ReplyDelete