PHP Pagination AJAX проблемы

Я пытаюсь добавить нумерацию страниц AJAX в свой календарь, чтобы избежать перезагрузки всего сайта, поскольку календарь находится на дополнительной вкладке, которая перезагружается на основной вкладке при перезагрузке.
Обычно моя кнопка «СЛЕДУЮЩИЙ МЕСЯЦ» будет заключена в ссылку, которая обновит ту же страницу с GET-значением даты, например так:

<a href="?date=<?php echo $nextDate; ?>">
<button type="button" class="btn">
NEXT MONTH
</button>
</a>

Который работает просто отлично. Но когда я пытаюсь передать значение $ nextDate в форме в AJAX и перезагрузить страницу, создается впечатление, что она не получает значение POST.

HTML:

<form method="post">
<input type="hidden" class="form-control" name="the_date" value="<?php echo $prevDate; ?>" />
<button type="button" data-name="next-month" class="btn">
NEXT MONTH
</button>
</form>

Javascript:

$("body").on( "click", "[data-name='next-month']", function() {
var the_date = $(this.form).find(".form-control[name=the_date]").val();
ajaxRequest = $.ajax({
type: "POST",
url: "index.php",
data: { the_date: the_date}
}).done(function (result) {
alert(the_date)
$("#calendar_container").load("index.php #calendar_container");
})
});

Правильно ли я поступаю по этому поводу, или есть какая-то причина, почему значения POST не выбираются при отправке их на один и тот же URL-адрес? Если у вас есть какие-либо предложения относительно того, как я могу решить эту проблему, это сделает мой день!