Adding AJAX to a working PHP form

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. :-)

Answer 2

In order to simplify ajax, you can use jQuery (a very powerful JS lib). Add jquery***.js to your project and refer it on your page:

 << script type="text/javascript" src="#js/jquery-ui-1.8.16.custom.min.js" />

Then, you create the javascript function that will make the ajax call. On the ajax call, you specify the php file to call and the function to handle the return of php(callback). On this callback function, you add the error message to body.

function verifyForm(){
 $.ajax({
   type: "POST",
   url: "register.php",
   data: "username=NAME_GOT_FROM_FORM_&location=Boston"
 }).done(function( returned ) { //the callback
   $('#errors').html(returned); // add the string returned to div id=errors
 });
}

Answer 3

So, the crux of the problem as you're asking it seems to be that you're (correctly) using a POST request on your register form, but your tutorials all want to use GET. Here's a discussion about the difference between the two methods:

http://thinkvitamin.com/code/the-definitive-guide-to-get-vs-post/

If you're actually registering the user with AJAX (rather than just validating) you should be submitting the AJAX request as a POST. If you're using jQuery, the answer has already been given. If you're not using jQuery, then look for the XMLHttpRequest object in your tutorial, and where its "open" method is called (reference here: http://www.w3.org/TR/XMLHttpRequest/ ). The first parameter of that function is a request method--change it to "post" rather than "get", and the request will be treated like a POST, which register.php expects.

That being said, it sounds like you just want AJAX to validate the form. In that case, GET is the correct verb to use--all you want to do with AJAX is check data against the database, not actually make a change to data. I would suggest that you actually write a new PHP script like validate_registration.php that will perform only the validation logic in register.php, and then return a JSON array of errors (which would be empty if no errors occurred). You can activate/deactivate your form submit button based on that return value, and let the user submit the form just like your old workflow if everything is okay.

The tl;dr here is that you should read up on what makes $_GET and $_POST different, and then write an AJAX-specific validation script so that you're separating the data-retrieval part of your process from the data-insertion part. Once you understand the difference, the rest should follow.