AJAX instant check with php and javascript

Question

I am developing a little webiste where I need to handle User registration. As usual, if a user requests a username that is already being used, the system should not allow to proceed with the registration.

I want to verify that during the register as most modern websites do. How do I do that using AJAX?

Register form:

<div class="container">
        <form id="register_form" action="actions/register_action.php" method="post">

            <div class="form-group">
                <label for="name_area">Name</label>
                <input type="text" name="name" class="form-control" placeholder="Name">
            </div>
            <div class="form-group">
                <label for="username_area">Username</label>
                <input type="text" name="username" class="form-control" id="username_id" placeholder="Username">
            </div>
            <div class="form-group">
                <label for="email_area">Email</label>
                <input type="email" name="email" class="form-control" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="pass_area">Password</label>
                <input type="password" name="pass" class="form-control" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="conf_pass_area">Confirm password</label>
                <input type="password" name="conf_pass_area" class="form-control" placeholder="Confirm password">
            </div>
            <br>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" id="button_area" placeholder="Submit">
                <!--action to:register_action!-->
            </div>
        </div>
    </form> 
    </div>

users.php (where I do my php function regarding users):

<?php
    //checks if username inserted is already in use
    function check_username($username_pretended) {
        global $conn;

        $stmt = $conn->prepare('SELECT * FROM CommonUsers WHERE username=?');
        $stmt->execute(array($username_pretended));

        $res = $stmt->fetch();

        if($res['username'] == "") {
            return false;
        }
        else return true;
    }

    //inserts an user in the database
    function insertUser($name, $username, $email, $password) {
        global $conn;

        $stmt = $conn->prepare('INSERT INTO CommonUsers(name, username, email, password) VALUES (?, ?, ?, ?)');
        $stmt->execute(array($name, $username, $email, $password));
    }
?>

Answer 1

From top of my head:

$("#username_id").on("change", function() 
{
    $.ajax(
    {
        method: "get", // or maybe post?
        url: "yoururlhere",
        data: 
        {
            username: $(this).val()
        },
        success: function(data)
        {
            if (data == "0")
            {
                // Hide warning
            }
            else
            {
                // Warn user that username is already taken
            }
        }
    });
});

This is the most simple way of doing this. Its sending the username to a server url for checking. Of course you will need an element to show the warning(which I could not find in your DOM).

You can check the ajax() method docs for detailed options.

In your PHP file:

$username = $_GET["username"];

if (check_username($username))
{
    return "1";
}
else 
{
    return "0";
}