CODEWITHSUNDEEP
javascriptajaxjqueryasynchronous
oliver_siegel
oliver_siegel

Reputation: 1676

javascript variable scope - how can i work around this?

I have an input field, where a user can enter an INPUTVALUE, this INPUTVALUE gets checked for correctness against a reg-ex, then sent off to a php file, which will do calculations with it, and return either 0 (meaning the INPUTVALUE was not valid) or a RETURNVALUE. This RETURNVALUE should be displayed in an element on the website with the id #VALUEINFO. Also I would like this RETURNVALUE returned by my function get_value_by_input(). In order to check what was returned, I am displaying an alert first.

(A practical application for this could be for example a coupon code on an order... put in your coupon code, we check it in the database, it returns the value of the coupon or 0 if it was not a valid coupon code.)

My problem is, I must be messing up something with the variable scope in Javascript, because eventhough my #VALUEINFO displays the correct RETURNVALUE, the alert will always say no returnvalue specified.

function get_value_by_input()
{
    var returnvalue;
    var valueinfo = $('#valueinfo');
    valueinfo.text('');
    var inputvalue = $("input[name='inputvalue']").val();
    var correctinput = /^[a-zA-Z]*$/i;
    if( inputvalue.length > 0 && correctinput.test(inputvalue))
    {
        $.post('ajax/valuecheck.php', {inputvalue_test: inputvalue}, function(is_valid){
            if(is_valid == 0)
            {
                       valueinfo.text('Sorry, this input is not working...');
                       returnvalue = 0;
            }
            if(is_valid != 0)
            {
                      valueinfo.text('the returned value for your input is '+is_valid);
                      returnvalue = is_valid;
            }
        });
    }
    else
    {
        if(inputvalue)
        {
            valueinfo.text('Invalid input.');
            returnvalue = 0;
        }
    }

    if(returnvalue)
    {
        alert('the value for this input was was '+returnvalue);
        return returnvalue;
    }
    else
    {
        alert('no returnvalue specified.');
        return 0;
    }
}

Again: Why does this code ALWAYS alert 'no returnvalue specified' eventhough #VALUEINFO gives me the correct returnvalue?

I assume this has to do with the if block, I read that javascript will not ignore the setting of any variables within if blocks, even if the condition is not fulfilled... But how else could I pass the value to #valueinfo and return it at the same time? Any help or suggestions would be greatly appreciated! :-)

EDIT:

Well, yes it has nothing to do with variable scope, but it's about Asynchronus-jax. I ended up restructuring my code... get_value_by_input() is now more of a process_input() function. First the INPUTVALUE is checked for correctness, and only if there were no errors $.post(... is called. The value returned by the php file is then used immediately within the callback function, rather then to be returned and then used from another function... Unfortunately I couldn't get my brain wrapped around working with .done() or something similar, guess I've been working too long on this today already... -.- Maybe next time. It works for now :)

Upvotes: 1

Views: 105

Answers (1)

Johan
Johan

Reputation: 35194

As mentioned in the comments, you need to handle the return value in a callback (since you're dealing with an asynchronous call).

This might give you a better understanding on how to solve the problem:

function getReturnValue(inputvalue, callback){
    $.post('ajax/valuecheck.php', { 'inputvalue_test': inputvalue}, callback);
}

var inputvalue = $("input[name='inputvalue']").val();

getReturnValue(inputvalue, function(is_valid){
    //handle is_valid here
    //it's the data returned from the ajax call
});

There are a lot of similar threads.

Upvotes: 3

Related Questions