Данные Ajax не распознают определенные переменные

Question

Ранее я задал вопрос относительно этого (который я удалил), где у меня было три отдельных сценария ниже. Сейчас я иду дальше и объединил их, но получаю ошибки.

Обычно я получаю значение переключателя для Месяца и значение другого переключателя для Года на основе id. Я устанавливаю их как переменные в jquery, и они отображаются в консоли, как и ожидалось. Они также отображаются в div, на который я ссылаюсь id, используя $("#Year_Display").empty(); $("#Year_Display").append(year);. Я делаю то же самое в течение месяца, как вы можете видеть ниже.

Я хочу опубликовать эти переменные, используя ajax, чтобы я мог заполнить <div> соответствующими месяцем и годом.

Вот что у меня есть:

<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>

Я получаю ошибку jquery-3.3.1.min.js:2 Uncaught ReferenceError: month is not defined, но когда я нажимаю разные месяцы и годы, они отображаются, как и ожидалось, как на консоли, так и на странице.

Я слишком долго работал над этим, чтобы не просить помощи; Я собрал это воедино из ответов здесь и на других сайтах. Как вы можете видеть, мой jquery / ajax не так хорош, поэтому любая помощь / ссылки будут оценены.

Answer 1

Я добавил некоторые изменения в коде, вы можете объявить var на глобальном уровне и использовать ее во всех своих функциях, поэтому использование этого не даст ошибки, если месяц не определен, надеюсь, это поможет вам!

// Выбор значения месяца и года

$(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);

            }

        });
    };

});