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));
    }
?>

I'm not sure what you are asking. What part of "doing this using ajax" are you having a problem with? — Mike
– Mike, Commented May 12, 2015 at 19:49
@Mike you are right I should've been a little bit more explicit. I understand how AJAX does the instant checking, but I can not figure out the syntax, or how to organize the files and what to do after getting the response from AJAX. — Carlos Pereira
– Carlos Pereira, Commented May 12, 2015 at 19:52

DontVoteMeDown · Accepted Answer · 2015-05-12 19:52:04Z

2

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";
}

answered May 12, 2015 at 19:52

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Carlos Pereira Over a year ago

So I would not be able to use my php file? I would have to create a new one exclusively to handle the AJAX call?

DontVoteMeDown Over a year ago

@CarlosPereira I can use your php file, but you'll need to know that the request was made to check the username only. And you have to call you function check_username() in some way and return the value to the request.

Carlos Pereira Over a year ago

I know that, so it is easier to have a file just for the ajax call. God damn it this is killing me

DontVoteMeDown Over a year ago

@CarlosPereira I think so, instead of messing up an existent file which holds another logic, e.g. receiving form data to persist.

Carlos Pereira Over a year ago

Sorry to keep bothering you, but I have several templates where I've structured my HTML, where would you advise me to store the jquery script?

|

Collectives™ on Stack Overflow

AJAX instant check with php and javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related