日期选择器的 Ajax onclick 事件

Question

如何让 datepicker 自动获取值并显示 php 的结果，这样我就不必制作按钮来触发它了

html:
<input class="form-control input-lg" id="datepicker" name="datepicker" placeholder="tahun/bulan/tanggal" type="text"/> <input type="submit" value="Ok" id="cek_absensi" class="btn btn-info input-lg">

javascript：

var pilih_tanggal = $("#datepicker").val();
if (pilih_tanggal == "" || pilih_tanggal == null)
{
    $(".absensi_hari_ini").show();
    $(".pilih_absensi").html("<h3 id='pesan_absensi'>//error message</h3>");
}
else
{
    $.post("absensi_lihat.php", {pilih_tanggal: pilih_tanggal})
    .done(function( data ) 
    {
        $(".pilih_absensi").html(data); //show result from php
    });
}

基本上按下按钮，然后在类 .pilih_absensi 上显示结果

Answer 1

我对您的代码进行了一些抽象，以使其更易于重用。您应该关注的主要部分是将更改事件绑定到日期选择器，这样您就可以在每次日期选择器更改时调用该功能，并且您可以在加载时 trigger 它以允许您在页面加载时从 php 直接将值放入其中.

// save your local jQuery objects
var $pilih_tanggal = $("#datepicker")
var $absensi_hari_ini = $(".absensi_hari_ini")
var $pilih_absensi = $('.pilih_absensi')

var datepickerChange = function(e) {
  // truthy and falsey are good enough to check the value
  if (!$(this).val()) {
    $absensi_hari_ini.show();
    $pilih_absensi.html("<h3 id='pesan_absensi'>//error message</h3>");
  } else {
    // we have a value so make the ajax call
    $.post("absensi_lihat.php", {
      pilih_tanggal: $(this).val()
    })
    .done(function(data) {
      $pilih_absensi.html(data);
    });
  }
}

// bind the change function
$pilih_tanggal.on('change', datapickerChange)
// call the change function on load
$pilih_tanggal.trigger('change')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control input-lg" 
  id="datepicker" 
  name="datepicker" 
  placeholder="tahun/bulan/tanggal" 
  type="text"/>
<input class="btn btn-info input-lg" 
  type="submit" 
  value="Ok" 
  id="cek_absensi">
<div class="pilih_absensi"></div>