PHP ajax signup form – using MySQL and Jquery

Today we will create a simple PHP ajax signup form using MySQL and Jquery.

Let’s get started and create a table that will hold the users information for our simple PHP ajax signup form.

The fields we need are the following:

  • id – this is our private key and it will be auto increasing its value.
  • username – the desired username.
  • email – the user’s email.
  • password – the desired password(stored as a hash).

Here is how to create it:

[code language=”sql”]
`id` int(11) NOT NULL,
  `username` varchar(20) NOT NULL,
  `password` varchar(250) NOT NULL,
  `email` varchar(60) NOT NULL


Now since we have our table we need to insert some users into it. Because we are going to use ajax in our signup form we don’t need a php file.
A simple HTML will do the job, so here the magic starts!


[code language=”html”]
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<script src="//"></script>
<script src="js/signup.js" type="text/javascript"></script>
<div class="login-card">
<input type="text" id="username" name="user" placeholder="Username">
<input type="text" id="email" name="email" placeholder="email">
<input type="password" id="password" name="pass" placeholder="Password">
<input type="button" id="signUp" name="signup" class="login login-submit" value="Sign up">

The above signup form needs to be designed, so create a css folder and style.css into it. Here is the content:


[code language=”css”]
@import url(,100);

body {
    background: url( no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: ‘Roboto’, sans-serif;

.login-card {
    padding: 40px;
    width: 274px;
    background-color: #F7F7F7;
    margin: 0 auto 10px;
    border-radius: 2px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;

.login-card h1 {
    font-weight: 100;
    text-align: center;
    font-size: 2.3em;

.login-card input[type=submit] {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    position: relative;

.login-card input[type=text], input[type=password] {
    height: 44px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 10px;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    /* border-radius: 2px; */
    padding: 0 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

.login-card input[type=text]:hover, input[type=password]:hover {
    border: 1px solid #b9b9b9;
    border-top: 1px solid #a0a0a0;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);

.login {
    text-align: center;
    font-size: 14px;
    font-family: ‘Arial’, sans-serif;
    font-weight: 700;
    height: 36px;
    padding: 0 8px;
    /* border-radius: 3px; */
    /* -webkit-user-select: none;
      user-select: none; */

.login-submit {
    /* border: 1px solid #3079ed; */
    border: 0px;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    background-color: #4d90fe;
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */

.login-submit:hover {
    /* border: 1px solid #2f5bb7; */
    border: 0px;
    text-shadow: 0 1px rgba(0,0,0,0.3);
    background-color: #357ae8;
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */

.login-card a {
    text-decoration: none;
    color: #666;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    opacity: 0.6;
    transition: opacity ease 0.5s;

.login-card a:hover {
    opacity: 1;

.login-help {
    width: 100%;
    text-align: center;
    font-size: 12px;

Congratulations! You already have your signup form and you are a step ahead of registering your user using ajax and PHP!

Next create a javascript that will handle the ajax request.

So create a js folder and place a file named signup.js into it.


[code language=”javascript”]
$(document).ready(function () {
    /* Catch the sign up button click event */
    $("#signUp").click(function () {
        /* Send the request to teh server */
            type: ‘POST’, // The request type POST or GET
            url: "app/controller.php", // The URL to the controller
            dataType: ‘html’, // The data type json, html, img etc…
            async: true, // async or sync
            /* The main request body */
            data: {
                action: "signUp", // The action that we are catching at controller.php
                username: $(‘#username’).val(), // Get the username user input
                email:    $("#email").val(), // Get the email user input
                password: $(‘#password’).val() // Get the password user input
            success: function (data) {
                /* We are getting here, if everything is ok */
                alert("User registered!");
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                /* If something goes wrong we’re comming here */

Ok, Sparky!

Since you’re reading this it means that everything woked out for you. Ok then – create a new folder named app and place 3 php files in it:

  • config.php – it will hold the database connection variables
  • dbAssistant.php – we will create the functions holding our queries in it
  • controller.php – it will handle our ajax request and execute specific functions of dbAssistant.php


[code language=”php”]

$host = "localhost"; //your hostname here
$dbName = "dbName"; //your database name here
$dbUsername = "dbUsername"; //your database username here
$dbPassword = "dbPassword"; // your database password here



[code language=”php”]

/* include the configuration and the functions files */
include ‘./config.php’;
include ‘./dbAssistant.php’;

/* Check if the session exists, if not start it */
if (session_status() == PHP_SESSION_NONE) {

/* Catch the action sent from teh ajax request */
$action = filter_input(INPUT_POST, ‘action’);

/* Check teh ajax action */
if($action == "signUp"){
    /* Encrypt the password */
    $encryptedPassword = password_hash(filter_input(INPUT_POST, ‘password’), PASSWORD_DEFAULT);
    /* Execute the function that inserts the user into teh database */
    signUp(filter_input(INPUT_POST, ‘username’), filter_input(INPUT_POST, ’email’), $encryptedPassword, $host, $dbUsername, $dbPassword, $dbName);



[code language=”php”]

/* Check if the session is started, if not then start it */
if (session_status() == PHP_SESSION_NONE) {

/* Sign up function – executed from controller.php */
function signUp($username, $email, $password, $host, $dbUsername, $dbPassword, $dbName) {

    /* Create connection */
    $mysqli = new mysqli($host, $dbUsername, $dbPassword, $dbName);

    /* The query that will be executed */
    $insertBannerAdQ = "INSERT INTO Users1(username, email, password) VALUES(?, ?, ?)";

    /* Execute teh query */
    if ($stmt = $mysqli->prepare($insertBannerAdQ)) {

        $stmt->bind_param(‘sss’, $username, $email, $password);

        /* close statement */



That’s it!
If you follow this tutorial step by step, you have a working ajax sign up form.

Mind that you have to check if the username, password and email fields are filled before you send your request to the server.

[button-green url=”” target=”blank” position=”center”]Find it on GitHub[/button-green]

Tags: , , ,