Registration page with PHP, jQuery and Ajax

In this tutorial we'll create a registration page using PHP, jQuery, and AJAX.

Signup page with jQuery and Ajax


Database table

We are using users table for this example.

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL


Creating a config.php file for define database and other configuration.


session_start(); /* Session Start name */

$host = "localhost"; /* Database Host name */
$user = "root"; /* Database User */
$password = ""; /* Database Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection is established or not. if not then stop execution with Connection failed error
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());


Creating a index.php file. in it create two input field for entering username and password for registration and a button to submit the form.

Give “registration-form” id to form and trigger AJAX call by jQuery submitevent.

<div id="custom-form-box" class="col-md-12">
 <form id="registration-form" class="form" action="" method="post">
     <h3 class="text-center text-info">Registration</h3> 
      <span class="error"></span>
      <span class="success"></span>                            
      <div class="form-group">
         <label for="username" class="text-info">Username:</label><br>
         <input type="text" name="username" id="username" name="userName" class="form-control">
      <div class="form-group">
         <label for="password" class="text-info">Password:</label><br>
         <input type="text" name="password" id="password" class="form-control">
      <div class="form-group submit_div">                            
         <input type="submit" name="btn_submit" class="btn btn-info btn-md" value="Register">


On Registration form submit call a AJAX request for Registration.

          // Get user input and trim it.
          var username = $('#username').val().trim(); 
          var password = $('#password').val().trim();           
          if(username != '' &&  password !=''){        
                  url: 'ajaxfile.php',// file path
                  type: 'post',// method
                  data: {username: username, password: password},// Data send in json form
                  success: function(response){                
                        $('.success').text('User created');                            
                        $('.success').text('User already registered with this username.');


Create a ajaxfile.php file.

First we check the username and password is set or not. then will check is user already registered with us or not.

if user not registered with us then we will register new user and return response message.

include 'config.php';
if(isset($_POST['username']) && isset($_POST['password'])){        
       // Escapes special characters in a string for use in an SQL query,
       $username = mysqli_real_escape_string($con,$_POST['username']);
       $password = mysqli_real_escape_string($con,$_POST['password']);       
       // check username and password is empty or not.
       if ($username != "" && $password != ""){        
           $sql_query = "select * from users where username='".$username."'";          
           $result = mysqli_query($con,$sql_query);           
           $UserData = mysqli_fetch_array($result);             
           // Check userdata is empty or not, if empty then create new user.
              // insert Query
             $insert_query = "INSERT INTO `users`( `username`, `password`) VALUES ('".$username."','".$password."')";          
             $result = mysqli_query($con,$insert_query);
               $response = "created";           
               // Set error messages
              $response = "alreadyregistered";
       echo $response;


Here, are some already registered usernames – admin, brad, larry, mark, john. please don’t try with this usernames.


In this tutorial, I showed how you can create a registration page with PHP, MySQL, jQuery, and ajax with unique username functionality.

Be First to Comment

Leave a Reply

Your email address will not be published.