Not able to receive ajax post data

Question

I'm trying to print a calendar using php but struggle figuring out how to change the month displayed with ajax

I have two buttons in tag whose value is "+1" and "-1" respectively with a class="selectMonth"

<button class="selectMonth" name="selectMonth" value="-1">previous</button>
<button class="selectMonth" name="selectMonth" value="+1">next</button>

This is my ajax code:

$(".selectMonth").on("click", function(){
        $.ajax({
            url : "index.php",
            type : "POST",
            data : {selectMonth : this.value},
            success : function(){
                alert("success!");
            }

        });

    }); 

and in my index.php I have

    <?php 
if(!isset($_POST["selectMonth"]))
    $_SESSION["date"] = time();
else
{
    $selectMonth = $_POST["selectMonth"];
    $_SESSION["date"] = strtotime($selectMonth . 'month');
}
var_dump($_POST["selectMonth"]);

$date = $_SESSION["date"];
print_calendar($date);

?>

After I click one of the buttons, I can get the alert message but not the $_POST variable and what is var_dump is always NULL

Could anybody find out the mistake for me? I'm still learning ajax.

Thank you very much!

Answer 1

Try

$(".selectMonth").on("click", function(){
    var inputVal = $(this).attr('value');
    $.ajax({
        url : "index.php",
        type : "POST",
        data : {selectMonth : inputVal},
        success : function(){
            alert("success!");
        }

    });

}); 

Answer 2

try below line of code :

data : {'selectMonth' : $(this).val()},

OR

data : {'selectMonth' : $(this).attr('value')},

Answer 3

Instead of

data : {selectMonth : this.value}

try

data : {selectMonth : this.val()}