JQuery - accessing a VAR in a function which I will need in another function?

Question

Ok so in my html/js i have a form that updates based on the users previous selection. On the last stage i have a select menu where the user will choose their city. I have stored the value of the selected item in my Options list with the id #myCity to the following.

('#myCity').change(function(){
    var CityValue = $("#myCity").val();
});

Once that value is set, my form then displays the submit button

<input type="submit" id="go" value="Submit" onclick="getweather()" />

This is where i start to have a bit of bother. In my getweather() function i want to be able to take the var CityValue from above and append it to another var so i can load a specific page.

function getweather(){
                    var CityValue;
                    var to_load = 'getweather.php?p='+ CityValue +'.html';

                    $('#weather').empty().append(to_load);


                 }

but in my testing i do not think that my getweather() function is able to read my desired var. Can anyone suggest a solution?

Answer 1

You declared the CityValue only in the function scope that you cannot access from outside. Either declare your variable globally:

var CityValue;
$('#myCity').change(function(){
    CityValue = $("#myCity").val();
});
function getweather() {
    var to_load = 'getweather.php?p='+ encodeURIComponent(CityValue) +'.html';
    $('#weather').empty().append(to_load);
}

Or just call $("#myCity").val() in your getweather function:

function getweather() {
    var to_load = 'getweather.php?p='+ encodeURIComponent($("#myCity").val()) +'.html';
    $('#weather').empty().append(to_load);
}

Answer 2

Well, the first function you specified (the event handler for onchange) doesn't do anything right now. You can just remove it and edit the second function like this:

function getweather(){
    var CityValue = $("#myCity").val();

    var to_load = 'getweather.php?p='+ CityValue +'.html';

    $('#weather').empty().append(to_load);
}

Answer 3

Well, the first function you specified (the event handler for onchange) doesn't do anything right now. You can just remove it and edit the second function like this:

You can then add this function call to the change event.

function getweather(){
    var CityValue = $("#myCity").val();

    var to_load = 'getweather.php?p='+ CityValue +'.html';

    $('#weather').empty().append(to_load);
}

$('#myCity').change(getweather);

Answer 4

The more elegant answer to the question is in using jQuery data API. This allows you to store arbitrary data within an object rather than declaring variables, keeping everything in a nice OOP manner. So, to do what you want would mean storing the value like so:

$('#myCity').change(function(){
   $("#myCity").data("CityValue", $("#myCity").val());
}); 

This way you would be able to retrieve it like so:

function getweather(){
   var to_load = 'getweather.php?p='+ $("#myCity").data("CityValue") +'.html';
   $('#weather').empty().append(to_load);
}