2016-09-23 4 views
1

как сделать DatePicker автоматически получить значение и показать результат с PHP поэтому я не должен сделать кнопку, чтобы вызвать егоAjax OnClick событие Datepicker

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

ответ

0

I abstra немного изменил ваш код, чтобы сделать его более многоразовым. Основной бит, на который вы должны сосредоточиться, - привязать событие изменения к datepicker, чтобы вы могли вызывать функциональные возможности каждый раз, когда изменяется датапикер, и вы можете использовать его при загрузке, чтобы вы могли прямо вводить значения из него с 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>

Смежные вопросы