Wait for AJAX call to finish before returning result-CodePudding

I'm trying to create some validation for my login form that when user tries to submit it, onsubmit="return checkLoginDetails1();" either tries to submit the form or not and would add some warnings etc. Issue I'm having is that I cannot get the result from AJAX call before return statement due to it being async - would anyone have any ideas regarding this? I've been exploring various similar posts but no results so far.

//This is the Ajax call - returns true or false as expected    
function waitForAjax() {
            return new Promise(function(resolve,reject){$.ajax({
            type: "POST",
            url: "login-validation.php",
            data: {email: $('#login-email').val(), password: $('#login-password').val()},
            success: function (data) {
                if(data.exists==="Match"){
                    resolve(true);
                } else {
                    resolve(false);
                }
            },
            dataType: 'JSON'
        });
    })
    }

function checkLoginDetails(){ //function that would be called in my html
    var test = await waitForAjax(); //value is returned true/false as expected.
    //previously tried waitForAjax().then(response => {
    //if(response === true) {
    //return true;
    //}
    //}); and same with false which did not work as it is not being returned to the 
    //outer-function
    return test;
};

CodePudding user response：

it is better to move the checkLoginDetails() on call back, only remove wait for ajax

$.ajax({
            type: "POST",
            url: "login-validation.php",
            data: {email: $('#login-email').val(), password: $('#login- 
               password').val()},
            success: function (data) {
                if(data.exists==="Match"){
                    resolve(true);
                } else {
                    resolve(false);
                }

                checkLoginDetails();

            },
            dataType: 'JSON'
        });

CodePudding user response：

Please try below solution. Have added async keyword before checkLoginDetails function. await should always be accompanied with async. Please read more on Javascript Promises to understand the root cause of your issue.

//This is the Ajax call - returns true or false as expected    
function waitForAjax() {
            return new Promise(function(resolve,reject){$.ajax({
            type: "POST",
            url: "login-validation.php",
            data: {email: $('#login-email').val(), password: $('#login-password').val()},
            success: function (data) {
                if(data.exists==="Match"){
                    resolve(true);
                } else {
                    resolve(false);
                }
            },
            dataType: 'JSON'
        });
    })
    }

async function checkLoginDetails(){ //function that would be called in my html
    var test = await waitForAjax(); //value is returned true/false as expected.
    //previously tried waitForAjax().then(response => {
    //if(response === true) {
    //return true;
    //}
    //}); and same with false which did not work as it is not being returned to the 
    //outer-function
    return test;
};