Ajax data not recognizing defined variables

Question

I asked a question earlier regarding this (which I deleted) where I had the below as three separate scripts. I'm further along now and have combined these but am getting errors.

Basically I'm getting the value of a radio button for Month, and the value of another radio button for Year based on id. I'm setting them as variables in jquery and they're displaying in the console as expected. They are also displaying in the div which I'm referencing by id using $("#Year_Display").empty(); $("#Year_Display").append(year);. I'm doing the same for Month as you can see below.

I'm wanting to post these variables using ajax, so I can populate a <div> with the corresponding month and year.

Here is what I have:

<script>
//Selects Month and Year Value
    $(document).ready(function(){

    $("#Jan, #Feb, #Mar, #Apr, #May, #Jun, #Jul, #Aug, #Sep, #Oct, #Nov, #Dec") // select the radio by its id
    .change(function(){
        if( $(this).is(":checked") ){ // check if the radio is checked
            var month = $(this).val(); 
            console.log(month); 
            $("#Month_Display").empty();
            $("#Month_Display").append(month);

            }
        });

    $("#1, #2, #3, #4") 
    .change(function(){ 
        if( $(this).is(":checked") ){ 
            var year = $(this).val(); 
            console.log(year); 
            $("#Year_Display").empty();
            $("#Year_Display").append(year);

            }
        });

        // ajax retrieve
        $.ajax({

            url:'includes/handlers/ajax_load_data.php',
            type:'POST',
            data:{'month':month, 'year':year},

                success: function(data) {
                    $('#myDIV').html(data);

                        }

                });
    });
</script>

The error I'm getting is jquery-3.3.1.min.js:2 Uncaught ReferenceError: month is not defined and yet when I click different months and years, they display as expected both in the console and on the page.

I've been working on this for too long not to ask for help; I've been piecing this together from answers on here and other Sites. As you can see my jquery/ajax is not that great, so any help/references would be appreciated.

Answer 1

I have added some changes in code, you can declare var at global level and you can use in all your function, so using this it will not give error that month is not defined, Hope this help you !

//Selects Month and Year Value

$(document).ready(function () {
    var month;
    var year;
    $("#Jan, #Feb, #Mar, #Apr, #May, #Jun, #Jul, #Aug, #Sep, #Oct, #Nov, #Dec") // select the radio by its id
        .change(function () {
            if ($(this).is(":checked")) { // check if the radio is checked
                month = $(this).val();
                console.log(month);
                $("#Month_Display").empty();
                $("#Month_Display").append(month);
                if (month != null && month != '' && year != null && year != '') {
                    loadData(month, year);
                }
            }
        });

    $("#1, #2, #3, #4")
        .change(function () {
            if ($(this).is(":checked")) {
                year = $(this).val();
                console.log(year);
                $("#Year_Display").empty();
                $("#Year_Display").append(year);
                if (month != null && month != '' && year != null && year != '') {
                    loadData(month, year);
                }
            }
        });

    // ajax retrieve
    function loadData(month, year) {
        $.ajax({

            url: 'includes/handlers/ajax_load_data.php',
            type: 'POST',
            data: { 'month': month, 'year': year },

            success: function (data) {
                $('#myDIV').html(data);

            }

        });
    };

});