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

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

＆＃13;

// 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')

＆＃13;

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

＆＃13;

Ajax onclick事件到datepicker

1 个答案: