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.");
        }
    });
}

You could check via DevTools what is your request returning, maybe it's a mal formatted request or your backend is not answering properly. — manelescuer, Apr 05 '18 at 09:07
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Aluan Haddad, Apr 05 '18 at 09:08
Looks like there are cases in your function which don't return anything. The default return value is ```undefined``` — Stefan Octavian, Apr 05 '18 at 09:09
backend answers correctly, if I try to use an existing username, it returns exist, else not_exist..... — Robert Kibet, Apr 05 '18 at 09:09
@RobertKibet this is a duplicate. You are not writing remotely correct code but you will in time. You need to learn about asynchronous programming. — Aluan Haddad, Apr 05 '18 at 09:10

score 0 · Answer 1 · answered Apr 05 '18 at 09:14

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.

score 0 · Answer 2 · answered Apr 05 '18 at 09:19

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, i.e. instead of return a write alert(a) and see what happens.

Ajax response with Javascript returns Undefined

2 Answers2