Ajax onclick事件到datepicker

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直接将值放入其中。

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