Ajax Registration Script Using JQuery with PHP and MySQL

In this tutorial, we will look on how to create a registration page using AJAX. We will be using ajax to call the backend in order to avoid page refresh and JQuery to minimize unnecessary validations.

Overview

To continue in this tutorial you will need to create the following files, copy and paste the codes in the respective files and save them in the same directory. The details and purpose of the respective files shall be discussed in later part of the tutorial.

  1. Index.php
  2. Dbconfig.php
  3. Register.php
  4. Script.js
  5. Style.css

After completion, our registration page should look pretty much like so :
Ajax Registration Script Using JQuery with PHP and MySQL

Database Schema

Create a database to store the details of the user. I will name mine “dbreg”. You can name anything you
like. After creating the database, add table to it.

You can use the codes below to add table named `tbl_users`.

1
2
3
4
5
6
7
8
CREATE TABLE IF NOT EXISTS `tbl_users` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(25) NOT NULL,
`user_email` varchar(60) NOT NULL,
`user_password` varchar(255) NOT NULL,
`joining_date` datetime NOT NULL,
PRIMARY KEY (`user_id`)
)

Index.php

In this file, we have the code which renders the HTML form which is used by users to register themselves. When a user click on submit button after filling the form it will send all the data to JavaScript file where inputs are validated and send to backend via AJAX Post call.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tutorial-22</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"
src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js">
</script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="signin-form">
    <div class="container">
        <form class="form-signin" method="post" id="register-form">
            <h2 class="form-signin-heading">Sign Up</h2><hr />
            <div id="error">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" />
            </div>
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
                <span id="check-e"></span>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password" name="password" id="password" />
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" />
            </div>
            <hr />
                <div class="form-group">
                <button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
                    <span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account
                </button>
            </div>
        </form>
    </div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Dbconfig.php

This file contains all the Database configuration that are needed to create a successful connection with the MySQL database.

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$db_host = "localhost";
$db_name = "dbreg";
$db_user = "root";
$db_pass = "";

try{
    $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
    $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
    echo $e->getMessage();
}
?>

Register.php

This file contains the code which takes the request sent from AJAX (POST method) to save the data in the database. First, it will read the $_POST variable for available data and they will be stored in local variables. Then, using PDO statements the data is stored in the database.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
require_once 'dbconfig.php';

if($_POST)
{
    $user_name      = mysql_real_escape_string($_POST['user_name']);
    $user_email     = mysql_real_escape_string($_POST['user_email']);
    $user_password  = mysql_real_escape_string($_POST['password']);
    $joining_date   = date('Y-m-d H:i:s');
   
    //password_hash see : http://www.php.net/manual/en/function.password-hash.php
    $password   = password_hash( $user_password, PASSWORD_BCRYPT, array('cost' => 11));
   
    try
    {
        $stmt = $db_con->prepare("SELECT * FROM tbl_users WHERE user_email=:email");
        $stmt->execute(array(":email"=>$user_email));
        $count = $stmt->rowCount();
       
        if($count==0){
            $stmt = $db_con->prepare("INSERT INTO tbl_users(user_name,user_email,user_password,joining_date) VALUES(:uname, :email, :pass, :jdate)");
            $stmt->bindParam(":uname",$user_name);
            $stmt->bindParam(":email",$user_email);
            $stmt->bindParam(":pass",$password);
            $stmt->bindParam(":jdate",$joining_date);

            if($stmt->execute())
            {
                echo "registered";
            }
            else
            {
                echo "Query could not execute !";
            }

        }
        else{

            echo "1"; //  not available
        }

    }
    catch(PDOException $e){
        echo $e->getMessage();
    }
}
?>

Script.js

This JavaScript file contains the validation for form data. In order to validate the data we will be using built-in JQuery validation library. Once the data passed through validation script it will make the AJAX call to send data to backend using method POST.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
$('document').ready(function()
{
    /* validation */
    $("#register-form").validate({
        rules:
        {
            user_name: {
                required: true,
                minlength: 3
            },
            password: {
                required: true,
                minlength: 8,
                maxlength: 15
            },
            cpassword: {
                required: true,
                equalTo: '#password'
            },
            user_email: {
                required: true,
                email: true
            },
        },
        messages:
        {
            user_name: "Enter a Valid Username",
            password:{
                required: "Provide a Password",
                minlength: "Password Needs To Be Minimum of 8 Characters"
            },
            user_email: "Enter a Valid Email",
            cpassword:{
                required: "Retype Your Password",
                equalTo: "Password Mismatch! Retype"
            }
        },
        submitHandler: submitForm
    });
    /* validation */

    /* form submit */
    function submitForm()
    {
        var data = $("#register-form").serialize();

        $.ajax({

            type : 'POST',
            url  : 'register.php',
            data : data,
            beforeSend: function()
            {
                $("#error").fadeOut();
                $("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
            },
            success :  function(data)
            {
                if(data==1){

                    $("#error").fadeIn(1000, function(){


                        $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; Sorry email already taken !</div>');

                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                    });

                }
                else if(data=="registered")
                {

                    $("#btn-submit").html('Signing Up');
                    setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load("successreg.php"); }); ',5000);

                }
                else{

                    $("#error").fadeIn(1000, function(){

                        $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+data+' !</div>');

                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                    });

                }
            }
        });
        return false;
    }
    /* form submit */

});

Style.css

The CSS codes are used to add some design to the registration form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@charset "utf-8";
/* CSS Document */

body{
    background:#f1f9f9;
}

.form-signin {
    max-width: 500px;
    padding: 19px 29px 29px;
    margin: 0 auto;
    //margin-top:90px;
    background-color: #fff;
   
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
           
    font-family:Tahoma, Geneva, sans-serif;
    color:#990000;
    font-weight:lighter;
}

.form-signin .form-signin-heading{
    color:#00A2D1;
}
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
    font-size: 16px;
    height: auto;
    padding: 7px 9px;
}

.signin-form
{
    //border:solid red 1px;
    margin-top:80px;
}
.navbar-brand{
    font-family:"Lucida Handwriting";
}
#btn-submit{
    height:45px;
}

Thank you for being with me till the end of the tutorial.I hope I was able to help you with the registration system. Feel free to share it with your friends and community. I would love to hear from you and any query you have in the comments.
Here is a post I would request you to check: User registration and login with email verification

Download

  1. form serialize doesn’t handle file input.

     Reply
  2. Just what I was looking for. Put your bookmarks.

     Reply
  3. Thanks for sharing. I have really liked your writeup.

     Reply
  4. trust its work guys, thanksful sanwebe

     Reply
  5. thanks for writing this tutorial , its work

     Reply
  6. it hang after click button create account and on button written sending….

     Reply
  7. thanks for sharing, hopely this coding help to me.

     Reply
Message Type : Question Comment ?
  • Question : Can include code, jsFiddle, codePen etc using Markdown Syntax.
  • Comment : Short comments and questions.