Return value from a asyncronous request using a callback function

Question

I have a HTTPRequest that returns a value. I'm capturing such value with a callback function.

The code executes and alert if the username is duplicate in the DB. However the "return false" is not working and the form is submitted (saveNewUser) with the duplicated username anyway. All the examples I've seen so far just stop at the callback with an alert just like I have in my code. So how do I accomplish that the return false stop the execution like in the other cases: first, last name and password checks?

Thank you so much.

function checkUsername(callbackUsername){
    var username = document.getElementById('username_id').value;
    var ajaxRequest = getXMLHttp();

          ajaxRequest.onreadystatechange = function()
          {
            if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){ 
               var response = trim(ajaxRequest.responseText);
               callbackUsername(response);
            } 
          };
        var url = "../admin/check_unique_username.php";    
        var parameters = "username="+username;
        ajaxRequest.open("POST", url, true); 
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");        
        ajaxRequest.send(parameters);   
    }

function checkNewUserForm(){
    if(document.getElementById('first_name_id').value === ""){
        alert("First Name cannot be blank!");
        document.getElementById('first_name_id').focus();
        return false;
    }
    if(document.getElementById('last_name_id').value === ""){
        alert("Last Name cannot be blank!");
        document.getElementById('last_name_id').focus();
        return false;
    }
    checkUsername(function(result) {
        if(result > 0){
        alert("ERROR: Username already exist. Please select a different username!!");
        document.getElementById('username_id').focus();
        return false;
        }
       });
    re = /[0-9]/; 
    if(!re.test(document.getElementById('password_id').value)) { 
       alert("Error: password must contain at least one number (0-9)!"); 
       document.getElementById('password_id').focus(); 
        return false;
    }
    saveNewUser(first_name,last_name,username,password);
}

For a basic use case I would just wrap all of your `checkNewUserForm` with the `checkUsername` function. However this would also be an appropriate place to use promises, for which there are libraries like https://github.com/kriskowal/q — Jack Guy, Aug 16 '15 at 18:53
Sheeeet, I write out a whole answer and then it gets marked as duplicate :) Here's what I wrote for you: http://www.vostok.xyz/32038674_answer.txt — Mitya, Aug 16 '15 at 19:03
I just found a solution: put the saveNewUser function call inside the checkUsername for result < 0. It worked, but is it there any other way? — f_house, Aug 16 '15 at 19:25
checkUsername(function(result) { if(result > 0){ alert("ERROR: Username already exist. Please select a different username!!"); document.getElementById('username_id').focus(); return false; }else{ saveNewUser(first_name,last_name,username,password); } }); — f_house, Aug 16 '15 at 19:33

score 0 · Answer 1 · answered Aug 16 '15 at 18:54

By return false you will only return from the callback function. You have to return from the checkNewUserForm() function to stop saving the new user. For this to happen, you can use a boolean variable hasDuplicateUsername to check whether a duplicate username entry is there, so that you can make it to true, inside the callback. And before saveNewUser() you should check whether it is false.

function checkNewUserForm(){
    var hasDuplicateUsername = false;
    if(document.getElementById('first_name_id').value === ""){
        alert("First Name cannot be blank!");
        document.getElementById('first_name_id').focus();
        return false;
    }
    if(document.getElementById('last_name_id').value === ""){
        alert("Last Name cannot be blank!");
        document.getElementById('last_name_id').focus();
        return false;
    }
    checkUsername(function(result) {
        if(result > 0){
        alert("ERROR: Username already exist. Please select a different username!!");
        document.getElementById('username_id').focus();
        hasDuplicateUsername = true;
        }
    });
    re = /[0-9]/; 
    if(!re.test(document.getElementById('password_id').value)) { 
       alert("Error: password must contain at least one number (0-9)!"); 
       document.getElementById('password_id').focus(); 
        return false;
    }
    if(!hasDuplicateUsername) {
        saveNewUser(first_name,last_name,username,password);
    }
}

Hello Tibzon.I tried that one but the global variable doesn't update from inside the callback. That was one of the first thing I tried. — f_house, Aug 16 '15 at 19:38
That is strange. Actually it should work as expected. Have yo defined `hasDuplicateUsername` variable inside the `checkNewUserForm()` method? A similar thing is done [**here**](http://jsfiddle.net/arunatebel/0nct88fh/) — Aruna Tebel, Aug 17 '15 at 03:39
Actually what I did was create a global variable = 0 (outside the checkNewUserForm) the variable got update inside the if statement ( = 1) and an alert inside the if also showed the variable being updated (printed 1). However a second alert outside the if statement printed 0. That's what I said it doesn't update a global variable. I think it is because the asynchronous status of the variable. The inside variable gets updated before the other outside one does even thought the alert outside the if statement is called last, the value stored is still 0. That's where I got lost. — f_house, Aug 17 '15 at 23:12

Return value from a asyncronous request using a callback function

1 Answers1