阿賈克斯onclick事件日期選擇器

Question

如何讓日期選擇器自動獲取價值，並顯示從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

我abstrast爲了使其更加可重用，將代碼添加了一點。您應該關注的主要內容是將更改事件綁定到日期選擇器，以便您可以在每次日期選擇器更改時調用該功能，並且您可以加載該代碼以允許您在頁面加載時將值直接從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>