当日期选择器的值更改时调用函数

时间:2016-12-24 02:15:38

标签: php html ajax datepicker onchange

我保留会话变量以在我的网站中存储日期。如:

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

但是当有人更改了日期选择器的日期时,应根据所选值修改会话变量值。我试图使用ajax调用来设置变量。这是上面提到的任务的HTML代码和javascript函数。

  

HTML代码

<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代码

<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>
  

但不幸的是,我尝试使用调用此sessionChange()函数   关于改变事件。但它不起作用。如果,真的很感激   有人可以帮我这个。

1 个答案:

答案 0 :(得分:2)

如果您使用的是jQuery,我建议您一直使用它。使用.change()来捕获更改事件。从输入元素中删除onchange=

$(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");
        }
    });
}); 

});

另请注意,更改事件仅在模糊发生后才会触发。