当日期选择器的值更改时调用一个函数 [英] 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']; ?>

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

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

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

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.

推荐答案

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

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.

这篇关于当日期选择器的值更改时调用一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！