Jangan lupa download jquery dulu di jquery.com .
PHP anda harus minimal versi 5.
Di bawah adalah contoh, jika select-box diganti, maka informasi yang tampak akan terupdate.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery ::: JSON AJAX</title>
<script type="text/javascript" src="others/jquery.js"></script><script type="text/javascript">
function refresh_data() {
if ($('#id_select').val() == '') {
return true;
}
$('#id_select').attr('disabled', true);
$('#id_wait').show();
$.getJSON(
'./jquery-jason-01-target.php',
{
'input_buah':$('#id_select').val()
},
function(data) {
$('#id_nama_ilmiah').html(data.nama_ilmiah);
$('#id_warna').html(data.warna);
$('#id_ukuran').html(data.ukuran);
$('#id_rasa').html(data.rasa);
$('#id_select').attr('disabled', false);
$('#id_wait').hide();
}
);
}
</script>
</head>
<body>
Ubah option utk otomatis refresh data.<br />
<select id="id_select" onchange="refresh_data()">
<option value="">-</option>
<option value="apel">Buah Apel</option>
<option value="jeruk">Buah Jeruk</option>
<option value="durian">Buah Durian</option>
</select>
<div>
Nama ilmiah = <strong id="id_nama_ilmiah">-</strong><br />
Warna = <strong id="id_warna">-</strong><br />
Ukuran = <strong id="id_ukuran">-</strong><br />
Rasa = <strong id="id_rasa">-</strong>
</div>
<div id="id_wait" style="display:none">
LOADING...
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery ::: JSON AJAX</title>
<script type="text/javascript" src="others/jquery.js"></script><script type="text/javascript">
function refresh_data() {
if ($('#id_select').val() == '') {
return true;
}
$('#id_select').attr('disabled', true);
$('#id_wait').show();
$.getJSON(
'./jquery-jason-01-target.php',
{
'input_buah':$('#id_select').val()
},
function(data) {
$('#id_nama_ilmiah').html(data.nama_ilmiah);
$('#id_warna').html(data.warna);
$('#id_ukuran').html(data.ukuran);
$('#id_rasa').html(data.rasa);
$('#id_select').attr('disabled', false);
$('#id_wait').hide();
}
);
}
</script>
</head>
<body>
Ubah option utk otomatis refresh data.<br />
<select id="id_select" onchange="refresh_data()">
<option value="">-</option>
<option value="apel">Buah Apel</option>
<option value="jeruk">Buah Jeruk</option>
<option value="durian">Buah Durian</option>
</select>
<div>
Nama ilmiah = <strong id="id_nama_ilmiah">-</strong><br />
Warna = <strong id="id_warna">-</strong><br />
Ukuran = <strong id="id_ukuran">-</strong><br />
Rasa = <strong id="id_rasa">-</strong>
</div>
<div id="id_wait" style="display:none">
LOADING...
</div>
</body>
</html>
File "jquery-jason-01-target.php"
PHP Code:
Tidak ada komentar:
Posting Komentar
Send Your Message