JavaScript: How to get variable from JavaScript to PHP

Question

I want to get a variable from js to php. From $('.form_datetime')(js) to $TimeFrom(php). I know it's very simple, but nothing worked yet. I do not want to change parameters in the URL (POST,GET,$_REQUEST).

<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">Time from </label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
        </fieldset>
    </form>
</div>


<?php

  $TimeFrom = 0;
  /* Get time from  datetimepicker */
  echo " My selected time is: " . $TimeFrom;

?>

And in script i need created function for transfer of values.

<script type="text/javascript">


    $('.form_datetime').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });


</script>

Answer 1

You can't have javascript passing info to PHP for do something unless you make a new request or make Ajax. JavaScript runs client side and PHP runs on server side.

If you want to change automatically you can modify the datepicker for include code if the date changes... update on web with jquery...

$('.form_datetime').datetimepicker({
    language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1
}).on('dp.change', function (e) {  
    $('#selected-date').html(e.date);
});

<?php
   $TimeFrom = 0;
   echo ' My selected time is: <span id="selected-date">';
 ?>

Answer 2

Maybe i solved this problem.

<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">Time from </label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input onchange="GetDataFrom()" class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span onclick="" class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
        </fieldset>
    </form>
</div>


<div id="print-date">
  <?php
    echo "print date: 0";
  ?>
</div>




<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="./js/locales/bootstrap-datetimepicker.cs.js" charset="UTF-8"></script>
<script type="text/javascript">


  function GetDataFrom()
  {
    var date = $( ".form_datetime" ).datetimepicker("getDate"); //to store it in a variable.
      $("#print-date").load("test.php",{SelectedDate: date}); 

  }



  $('.form_datetime').datetimepicker({
      language:  'cs',
      weekStart: 1,
      todayBtn:  1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      forceParse: 0,
      showMeridian: 1
  });





</script>

And in test.php

  <?php

  $SelectedDate = $_POST['SelectedDate'];
  echo "print date: : " . $SelectedDate;

  ?>