Jump to content

Username Availability Check


Recommended Posts

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>
    <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"/>
<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 class="form-group">
                    <label>First Name</label>
                    <input class="form-control" type="text" name="firstName" placeholder="First Name" required/>

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

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

    $("#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


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


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

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


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

    //sanitize username

    //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 "
                $('#submitBTN').prop('disabled', true); //TO DISABLED
        echo '<i class="fa fa-check" style="color:green;margin-left:15px;margin-right:5px;"></i>Username Available';
        echo "
                $('#submitBTN').prop('disabled', false); //TO DISABLED

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...