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.

Mustufa · Accepted Answer · 2019-04-06 11:49:40Z

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

            }

        });
    };

});

edited Apr 6, 2019 at 11:49

answered Apr 6, 2019 at 10:59

Mustufa

1314 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Raylene Over a year ago

The global variables var month; & var year; prevent the errors on the page. But they have no value. I need them to have value from month = $(this).val(); and year = $(this).val(); so they are meaningful to make calls in php. Maybe it's the way the whole thing is structured. & np I appreciate any help :)

Mustufa Over a year ago

and you can create a another function for ajax call and put it outside document.ready and you can check it when month and year both have values

Mustufa Over a year ago

but when user select any drop down then you are assign values to both var , this is used when you need to use your var multiple times, how ever if this is help you then pls mark answer as accepted :)

Raylene Over a year ago

yeah the ajax doesn't fire when I try if statement. So month and year are not retaining their value beyond the .change(function()

Raylene Over a year ago

I'm not using a dropdown. I'm using radio buttons, which I why I need .change

|

Collectives™ on Stack Overflow

Ajax data not recognizing defined variables

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related