Ajax response with Javascript returns Undefined

Question

I am trying to pass a variable from a form field to a function which in returns checks if the value exists from the database and returns either exists or not_exist, but this it returns undefined.

registerButtonAction.addEventListener('click', function() {
        disableRegisterButton();
        var getRegisterUsername = document.getElementById('registerUsername').value;

        var confirmUser = validatedUser(getRegisterUsername);
        alert(confirmUser); //alerts undefined instead of exist, or not_exist
        if (confirmUser === 'not_exist') {
            alert('Okay');
        }
    });

function checkRegisterUsername(getRegisterUsername){
    $.ajax({

        type:"post",
        url: "accounts/users/checkUsername/"+getRegisterUsername,
        data:{getRegisterUsername:getRegisterUsername},
        success: function(data){
            if(data==='exists'){
                var a='exists';
                return a;
            }else if(data==='not_exist'){
                var a='not_exist';
                return a;
            }else if(data==='navigation_error'){
                enableRegisterButton();
                document.getElementById('resistrationStatus').innerHTML="<small style='font-size: 15px; color: #ac2925'><i class='fa fa-info-circle'></i> FATAL ERROR OCCURRED, RELOAD PAGE</small>";
            }else{
                enableRegisterButton();
                document.getElementById('resistrationStatus').innerHTML="<small style='font-size: 15px; color: #ac2925'><i class='fa fa-info-circle'></i> FATAL ERROR OCCURRED, RELOAD PAGE</small>";
            }
        },
        error: function() {
            alert("Error Occured, Check your connection and try again.");
        }
    });
}

Answer 1

I guess your validateUser(..) function will call your ajax. In your case i think your ajax call isn't finish yet when alert is fired.

Try to move this part at the end of ajax's success. Or you can either add async: false as paremeter of ajax. With async to false it will wait for the end of the call before move on.

Answer 2

I suppose that validatedUser and checkRegisterUsername are the same function, and you forgot to change the names.

AJAX calls are tipically asynchronous. This means that you can't wait for a return value: success function will be executed when the AJAX call will succeed, but in a separate context.

Even if you make the AJAX call synchronous, return in a success/error callback is meaningless. Also, the return value you are trying to catch is the one of checkRegisterUsername , that does not have a return status at all, that's why is undefined.

To achieve what you want, try to put the alert part inside the success handler, ie instead of return a write alert(a) and see what happens.