I've an ajax registration form. The user may type in the desired username in the input field and then immediately hit the register button, while the ajax request to check if the username is available or not wasn't pleted. For this case I want the actions of the register button to start executing only if the ajax request to check username is plete, otherwise wait for it to plete and then proceed. How to do this?

I want the username validation function to remain asynchronous because it executes every time the user does a key-up on the input field.

One way is to enter into a setTimeout() loop when the register button is clicked, and to stay in it until the flag is good. Another way is to call a synch username check request if the asynch request isn't plete. Is there a better method?

It'll be nice if you give answer without using jQuery.

I've an ajax registration form. The user may type in the desired username in the input field and then immediately hit the register button, while the ajax request to check if the username is available or not wasn't pleted. For this case I want the actions of the register button to start executing only if the ajax request to check username is plete, otherwise wait for it to plete and then proceed. How to do this?

I want the username validation function to remain asynchronous because it executes every time the user does a key-up on the input field.

One way is to enter into a setTimeout() loop when the register button is clicked, and to stay in it until the flag is good. Another way is to call a synch username check request if the asynch request isn't plete. Is there a better method?

It'll be nice if you give answer without using jQuery.

• javascript
• ajax

Share Improve this question Follow asked Jul 16, 2012 at 14:03 gomgom 89722 gold badges1111 silver badges2424 bronze badges 3

• This is something you can do pretty easily in jQuery. Is this something you'd be ok with? You would use the success callback for this. – Undefined Commented Jul 16, 2012 at 14:05
• Instead of jQuery I'll prefer a conceptual explanation of what to do. I don't know jQuery. – gom Commented Jul 16, 2012 at 14:18
• Erm... so you need the register button to be disabled until the username is validated, right? – raina77ow Commented Jul 16, 2012 at 14:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Don't use setTimeout for this.

Simply use the callback capabilities of jquery's ajax : execute your "after" code in the success callback or the new done helper :

$.ajax({
  url: "test.html"
}).done(function() { 
  // do things after the answer has been received
});

EDIT :

Without jquery, and without immediate triggering :

var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
                requestDoneAndOK = true;
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();

And when the "register" button is clicked, you just have to check requestDoneAndOK and if it's true call your other function.

EDIT 2 :

Code is executed as soon as 2 conditions are realized : answer received and register button clicked.

var registerClicked = false;
var ajaxAnswerReceived = false;
function check() {
    if (registerClicked && ajaxAnswerReceived) {
         // do the thing !
    }
}
var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
              ajaxAnswerReceived = true;
                check();
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();
document.getElementById('registerButton').onclick = function(){
     registerClicked = true;
     check();
};

If you want to do this without jQuery you'll need to use the default JavaScript call mechanism using onreadystatechange. Remember that jQuery is just a wrapper around the default mechanisms. I do remend that you use jQuery or something else just to prevent a whole slew of cross browser issues and http state change logic.

Read all about the native stuff here: http://www.w3schools./ajax/ajax_xmlhttprequest_onreadystatechange.asp

You need to use callbacks and store validation flag booleans that you then need to check before the user submits the registration page. This is a jquery implementation, but its not difficult to turn it into regular js. The method is defined here:

var goodUsername = false;

// keyup handler, pseudo code 
$('#username').keyup(function(event) { 
    // perform the username validation with an ajax call:
    $.ajax({
        url: "validateUsername.php"
    }).done(function(data) {
        // set the goodUsername if its good or not
        if (data.usernameIsGood)
            goodUserName = true;
    });
});

// submit the registration form only if the username has been checked and is good
$('#registrationFormButton').click(function(event){
     if (goodUsername)
         return true; // allows the browser to submit the form
     else
         return false;
});