在同一页面上使用ajax将javascript变量传递给php变量

Question

I have a calendar created using a for loop. When the user clicks on a cell in the calendar, they will be navigated to a modal window;

$calendar.= '<td class="calendar-day"><a href="#myModal" data-toggle="modal" data-target="#myModal" data-id="'.$list_day .'" data-month="'.$month .'" data-year="'.$year .'" onclick=" document.getElementById('. "'myModal'" . ').style.display = ' . "'block'". ' ;"></button><div style="position:relative;height:100px;">'; 

I am passing the date by day, month and year to the modal and saving each as a seperate javascript variable, then merging them together to form a javascript variable (date). I would like to pass this variable to the modal window and use as a php variable. My javascript is:

$('#myModal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var month = $(e.relatedTarget).data('month');
var year = $(e.relatedTarget).data('year');
var string = id +'/'+ month +'/'+year;
var date = year +'-'+month+'-'+id;

$(e.currentTarget).find('input[name="id1"]').val(string);
$(e.currentTarget).find('input[name="id"]').val(id);
$(e.currentTarget).find('input[name="month"]').val(month);
$(e.currentTarget).find('input[name="year"]').val(year);

 $(".test5").val(id+'/'+month+'/'+'/'+year);

$(document).ready(function() {
    $('#myModal').click(function() {
        $.ajax({
            url: 'my_planner.php',
            type: 'GET',
            data: { var_PHP_data: date },
            success: function(data) {
                $('#result').html(data);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                //case error                    }
            }
        });
    });
});

});

My modal html code is:

<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<div class="modal-body">
  <form action="my_planner.php" method="post">
  <!--<span class="test5"></span>-->
  <!--<span class="test"><input type="text" name="id_disabled" value="" disabled/>-->
  <input class="test" type="text" name="id1" value="" style="text-align:center; border:0px; font-weight:bold; font-size: 25px;"/>
  <hr class="my-4">
  <input type="hidden" name="id" value=""/>
  <input type="hidden" name="month" value=""/>
  <input type="hidden" name="year" value=""/>

<br>
<?$date = $_GET['var_PHP_data']; 
echo 'Date:'.$date;?>
<p id="result"></p>

The modal is displaying the string date but not the variable? Where am I going wrong? I'm not familiar with ajax

Answer 1

You can concatenate date and add it to data-date for example:

$calendar.= '<td class="calendar-day"><a href="#myModal" '
  .' data-toggle="modal" data-target="#myModal" '
  .' data-date="' . $list_day .'/' . $month . '/' .$year .'"'
  .' onclick=" document.getElementById('. "'myModal'" . ').style.display = ' 
 . "'block'". ' ;"></button><div style="position:relative;height:100px;">'; 

and in JS:

var date = $(e.relatedTarget).data('date');

$('#result').html(date);