AJAX return true/false - I have implemented a callback [duplicate]

Question

First of all I have read these topics:

• jQuery AJAX function return true or false returning only false while its all good
• What to return for jQuery's ajax data param in callback function?
• How return true or false function of data response ajax?

and I still cannot figure out how to get this to work.

$("#btn_go").on('click', function(){
    if(validateUserDetails() == false){ 
        return;
    }
});

The function validateUserDetails has the following:

function validateUserDetails(){
    var bool = false;
    
    $.ajax({
        url: 'response.php?type=validateUserDetails',
        type: 'POST',
        dataType: 'json',
        data: {
            name: $("#checkout_name").val(),
            email: $("#checkout_email").val(),
            "country": $("#checkout_country").val(),
            "city": $("#checkout_city").val()
        },
        success: function(data){
            console.log(data); // this is currently returning FALSE
                               // Which is totally correct!
            if(data == true){ bool = true; }
            return trueOrFalse(bool);
        }
    });
}

function trueOrFalse(bool){
    return bool;
}

However, this is not working because if I output the function I get undefined, which means that the function is not retuning the correct value. console.log(validateUserDetails()); // = undefined

What am I doing wrong?

Answer 1

ajax request is asynchronous. Don't use the sync: true option, it's not really a good idea. What you can do is to use the promise that the ajax returns, so:

function validateUserDetails(){

return $.ajax({
    url: 'response.php?type=validateUserDetails',
    type: 'POST',
    async: false,
    dataType: 'json',
    data: {name: $("#checkout_name").val(), email: $("#checkout_email").val(), "country": $("#checkout_country").val(), 
           "city": $("#checkout_city").val()},
    success: function(data){
        console.log(data); // this is currently returning FALSE
    }
  });
}
$("#btn_go").on('click', function(){
    validateUserDetails().done(function(data){
         if(data == "someValue")
            return "whatever you want";
    });
});

Answer 2

As noone has answered yet, I will:

First of all, you can try sync request

function validateUserDetails() {
    var bool = false;

    $.ajax({
            url: 'response.php?type=validateUserDetails',
            type: 'POST',
            async: false,
            dataType: 'json',
            data: {name: $("#checkout_name").val(), email: $("#checkout_email").val(), "country": $("#checkout_country").val(), "city": $("#checkout_city").val()},
            success: function(data) {
                console.log(data);  // this is currently returning FALSE
                                    // Which is totally correct!
                if (data == true) {
                    bool = true;
                }
            }
    });

    return trueOrFalse(bool);
}

If it is not acceptable, you can use $.Deferred()

function validateUserDetails() {
   var deferred = $.Deferred();
   var bool = false;

   $.ajax({
      url: 'response.php?type=validateUserDetails',
      type: 'POST',
      dataType: 'json',
      data: {name: $("#checkout_name").val(), email: $("#checkout_email").val(), "country": $("#checkout_country").val(), "city": $("#checkout_city").val()},
      success: function(data) {
      console.log(data);  // this is currently returning FALSE
                                            // Which is totally correct!
            if (data == true) {
                            bool = true;
                        }
                    }
      complete: function () {
                        deferred.resolve(trueOrFalse(bool));
                    }
      });

   return deferred.promise();
}

function trueOrFalse(bool){
        return bool;
}

function test() {
   var promise = validateUserDetails();
   promise.done(function(result) {
        console.log("Bool: " + result);
   });
}