在javascript函数中设置变量

Question

I am having a problem setting a value to a variable. My code is as below.

function fpform(){
var response_new = '';
var password_reset = "";
var fpemail = $('#frgtpwd').val();
//var fpemail = document.getElementById('frgtpwd').value;

if (fpemail == ""){
    $('span#fperror').text("insert your emal address");
    //document.getElementById('fperror').innerHTML = "Insert your email address";
    password_reset = 'no';
} else { 
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (filter.test(fpemail)==false) { 
        $('span#fperror').text("Email address is not in valid format");
        //document.getElementById('fperror').innerHTML = "Email address is not in valid format";
         password_reset = 'no';
    } else {
        $("#loader").html('<img src="images/ajax-loader.gif" />');
        $.post("forgot_password_process.php", {
            email:fpemail
        }, function(response){
            response_new = response.trim();
        }).success(function () {
            if (response_new == 'yes'){ 
                $("#fperror").html('<font color="green"><b>Your password has been reset now and emailed to you </b></font>');
                $("#loader").empty();
                password_reset = 'yes';
            } else {
                $("#loader").empty();
                $("#fperror").html('<font color="black"><b> Email address was not found in database!</b></font>');
                password_reset = 'no'; 
            } 
        }); 
    }
}

if (password_reset == "yes"){
    alert(password_reset);
    return true;
} else {
    alert(password_reset);
    return true;
}
}

The last if condition is checking if the password_reset variable is set to yes or not and returns true or false depending on that. But the alert displays blank value of the password_reset variable. I can't seem to find a problem behind this as the password_reset variable should get assigned before reaching the last if. can anyone please suggest a solution.

Kind Regards

Answer 1

$.post() is asynchronous, therefor the request hasn't completed when you alert the data. For this to work, you need to call the alert within the success-callback as well, to make sure that you have the data before you try to alert it. Another option would be to use a synchronous AJAX-call (this is rarely a good option though).

Update

Not sure why your function return true/false, but for that to work, you would have to make a synchronous AJAX-call, otherwise the outer function will return long before the AJAX-call completes, and at that point you don't know what the response is.

You should probably try to restructure your code to make the code that depend on the response of your outer function callable by the success-callback instead.

Answer 2

I was gonna post the same thing as as Christofer. Here's a fixed code sample. Just remove the last code block too.

.success(function () {
        if (response_new == 'yes'){ 
            $("#fperror").html('<font color="green"><b>Your password has been reset now and emailed to you </b></font>');
            $("#loader").empty();
            password_reset = 'yes';
            alert 'yes';
            return true;
        } else {
            $("#loader").empty();
            $("#fperror").html('<font color="black"><b> Email address was not found in database!</b></font>');
            password_reset = 'no';
            alert 'no';
            return false;
        }