Username Availability Check

**Prodjex** · August 7, 2017

This will be a walk-through on how to create a submit form that checks the database to make sure the username is not taken. If it is taken it will not allow the submit button to be activated.

HTML on index.php page:

<!DOCTYPE html>
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">

            Test out functionality by using the username: test@test.com
            <form class="col-md-12" action="submit.php" method="post">
                <div class="form-group">
                    <label>Username</label><span id="userResult"></span>
                    <input id="username" class="form-control" type="text" name="username" placeholder="Username" required/>
                </div>

                <div class="form-group">
                    <label>First Name</label>
                    <input class="form-control" type="text" name="firstName" placeholder="First Name" required/>
                </div>

                <div class="form-group">
                    <label>Last Name</label>
                    <input class="form-control" type="text" name="lastName" placeholder="Last Name" required/>
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input class="form-control" type="email" name="email" placeholder="Email" required/>
                </div>
                <button class="btn loginBTN" id="submitBTN" disabled>INVITE</button>
            </form>
        </div>
    </div>
</div>

<script>
    $("#username").keyup(function (e) { //user types username on inputfiled
        var username = $(this).val(); //get the string typed by user
        $.post('checkUsername.php', {'username':username}, function(data) { //make ajax call to check_username.php
            $("#userResult").html(data); //dump the data received from PHP page
        });
    });
</script>

<style>
    .container{
        margin-top:50px;
    }
    #go{
        margin-top:20px;
    }
</style>
</body>
</html>

PHP Script to check database to see if username is taken:

<?php

//Set Vars
$host = 'localhost';
$username = 'database username';
$password = 'users password';
$dbName = 'database name';

//Database connection
$db = new mysqli($host, $username, $password, $dbName);

if(isset($_POST["username"]))
{

    //trim and lowercase username
    $username =  strtolower(trim($_POST["username"]));

    //sanitize username
    $username = filter_var($username, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH);

    //check username in db
    $sql = "select id
            from users
            where username='$username'";
    $results = $db->query($sql);

    //return total count
    $username_exist = $results->num_rows; //total records

    //if value is more than 0, username is not available
    if($username_exist) {
        echo '<i class="fa fa-times" style="color:red;margin-left:15px;margin-right:5px;"></i>Username Unavailable';
        echo "
            <script>
                $('#submitBTN').prop('disabled', true); //TO DISABLED
            </script>";
    }else{
        echo '<i class="fa fa-check" style="color:green;margin-left:15px;margin-right:5px;"></i>Username Available';
        echo "
            <script>
                $('#submitBTN').prop('disabled', false); //TO DISABLED
            </script>";
    }
}

You can see this demo here.

You will notice on page load the submit “Invite” button is disabled, as you start to type in a username it checks each keystroke to see if that username exists in the database. If it does not then the submit button will become enabled. You get a response back as well letting you know in real-time if the name is available. On the demo a user that does exist is test@test.com. Check out the demo.

The post Username Availability Check appeared first on Kansas City Web Consulting | Kansas City Web Development.

View the full article

Sign In

Username Availability Check

Recommended Posts

Prodjex

Join the conversation

Our Network

Quick Links

About Us

Browse

Activity