Call a function when values of the date picker changes

问题

I am keeping session variables to store dates in my website. Such as:

<php $_SESSION['checkin'];
  $_SESSION['checkout']; ?>

But when someone changed the dates of the date picker, session variable values should be modified according to the selected values. I was trying to use an ajax call to set variables.This is the HTML code and the javascript function for the above-mentioned task.

HTML Code

<div id="reportrange" class="selectbox "  style="border: 1px solid #ddd; border-radius: 4px; padding:5px; background: #fff; cursor: pointer; margin: 0  0 4px 0;overflow: hidden; white-space: nowrap;">
              <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
              <input type="hidden" onchange="changeSession()"   name="selectdaterange" id="selectdaterange" value="<?php echo $_SESSION['checkin'] ?> - <?php echo $_SESSION['checkout']?>" disabled/>
</div>

JAVASCRIPT Code

<script type="text/javascript">

$(function() {
    alert("dhgfhgfhf");
    // var start = moment().add(1, 'days');
    // var end = moment().add(2, 'days');
    var start = moment('<?php echo $_SESSION['
        checkin '] ?>', 'MM/DD/YYYY');
    var end = moment('<?php echo $_SESSION['
        checkout '] ?>', 'MM/DD/YYYY');
    var min_date = moment().add(1, 'days');

    function cb(start, end) {
        $('#selectdaterange').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        //  changeSession(); // alert (start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
        "autoApply": true,
        "startDate": start,
        "endDate": end,
        "minDate": min_date,
        "opens": "center"
    }, cb);
    cb(start, end);
});

function changeSession() {
    alert("gfgf");
    var start = document.getElementsByName('daterangepicker_start').value;
    var end = document.getElementsByName('daterangepicker_end').value;
    $.ajax({

        type: 'POST',
        data: 'checkin=' + start + '&checkout=' + end,
        url: "<?php echo base_url(); ?>index.php/DateController/setHotelPageDate",
        dataType: 'json',
        cache: false,
        success: function(response) {
            alert("response.message");
        }
    });
}

</script>

But unfortunately, I tried to call this sessionChange() function using on change event. But it's not working. It would be really grateful if someone could help me with this.

回答1:

If you are using jQuery, I suggest you use it all the way. Use .change() to catch the change event. Remove the onchange=from the input element.

$(document).ready(function() {

$("#selectdaterange").change(function changeSession() {
    alert("gfgf");
    var start = document.getElementsByName('daterangepicker_start').value;
    var end = document.getElementsByName('daterangepicker_end').value;
    $.ajax({

        type: 'POST',
        data: 'checkin=' + start + '&checkout=' + end,
        url: "<?php echo base_url(); ?>index.php/DateController/setHotelPageDate",
        dataType: 'json',
        cache: false,
        success: function(response) {
            alert("response.message");
        }
    });
}); 

});

Also note that change event will only fire after blur happens.

来源：https://stackoverflow.com/questions/41309742/call-a-function-when-values-of-the-date-picker-changes

标签

php

html

ajax

datepicker

onchange