Question

I have a working PHP registration form that goes through $_POST[] requests to check user inputs.

• Username length (3-20)
• Username availability
• Username /^[A-Za-z0-9_]+$/
• etc.

Rather than have it take you to a whole new page to display errors, I want a live request to call for the errors from register.php so they will appear in a div on the registration.

<div id="errors">" . $usernameErrors . "</div>

I’ve been trying to read up on AJAX but have noticed most codes involve utilizing $_GET[].
What will I have to do to get my current forms integrated with AJAX?

My Current Basic Registration Form Logic:

<form method="post" action="register.php">
    <input type="text" name="username" id="username" required />
    $usernameErrors
</form>

And register.php contains all of the checks already.

Answer 1

If you’re using jQuery, it’s pretty simple.

<script type='text/javascript'>

    $.post('/register.php', 
           {username: $('#username').val()
            // insert values of other fields here
           }, 
           function(response) {
               // update your div with errors
               $('#errors').html(response);
           })

</script>           

You should invoke this code, for example, when user changes username in registration form. It will happen in background and update page asynchronously.

Your register.php script should, in this case, emit only errors, not the whole page, or you will see unexpected results. 🙂