How to use a value from a textbox with OnChange in a new function?

Question

Here is what I am trying to do:

I am getting a value from PHP and putting it in a textbox (function 1). That works fine.
I am trying to use that value in another PHP query (function 2). Does not work fine.

Both functions should start on loading the page and must remain in separate functions. Problem: the result variable of the first function cannot be found in the second one. As I tried to point out inside the code, the variable "seizoen" remains empty in the second function. Any idea what I am doing wrong here or how I can solve this?

<input type="text" id="Seizoen_text" OnChange="getCompetitie()>

<select id="Competitie_list"></select>

window.onload = function() {
    getSeizoen();    
    getCompetitie();
};

function getSeizoen() {
    $.ajax({
        type:'POST',
        url:'get_seizoen.inc.php',
        dataType: 'json', 
        success: function(response){
            var maxseizoen = response[0]['MaxSeizoen'];
            $("#Seizoen_text").val(maxseizoen);
        }
    });
}

function getCompetitie() {
    seizoen = $("#Seizoen_text").val();
    alert(seizoen);  //  **--> EMPTY !**
    $.ajax({
        type:'POST',
        url:'get_competitie.inc.php',
        dataType: 'json', 
        data: {seizoen: seizoen},
        success: function(response){
            $("#Competitie_list").empty();
            var len = response.length;
            for(var i = 0; i < len; i++){
                var competitievorm = response[i]['Competitie'];
                $("#Competitie_list").append("<option value='"+competitievorm+"'>"+competitievorm+"</option>");
            }
        }
    });
}

That could be it. I thought referencing it in the second function was enough. Any suggestions what I should do here exactly? — Peter Verreyde, Dec 14 '18 at 17:07
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, Dec 14 '18 at 17:31

haldo · Accepted Answer · 2018-12-14T17:34:13.673

The problem is probably the asynchronous calls.

What's happening is getSeizoen() gets called on window load, but it does an ajax call. While the ajax call executes on the server, during this time getCompetitie() is also called.

In getCompetitie() you are populating the variable seizoen = $("#Seizoen_text").val(); but the textbox probably doesn't have the value yet (since its an asynchronous call).

I'd suggest removing the call to getCompetitie() from the window.load event and call it once the first ajax has completed. There are multiple ways to do this but you could do something like:

function getSeizoen()
{
    $.ajax({
        type:'POST',
        url:'get_seizoen.inc.php',
        dataType: 'json', 
        success: function(response){
            var maxseizoen = response[0]['MaxSeizoen'];
            $("#Seizoen_text").val(maxseizoen);
            getCompetitie(); // added call here on success
        }
    });
}

How to use a value from a textbox with OnChange in a new function?

1 Answers1