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);
}