Semoga artikel ini dapat sedikit memberi pencerahan buat bang waka , pada artikel ini saya akan membahas lagi mengenai JQuery dan Ajax . Kasus sekarang , saya akan mengambil record dengan combo box yang nantinya isi record akan pinda ke textbox . yo #mehape aja langsung
Pertama buat database , prepare dan tablenya
CREATE TABLE IF NOT EXISTS `kode` (
`kode` varchar(3) NOT NULL,
`nama` varchar(20) NOT NULL,
PRIMARY KEY (`kode`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
lalu isi table tersebut
INSERT INTO `kode` (`kode`, `nama`) VALUES
('K01', 'Coba'),
('K02', 'Tes');
kalo belum ada plugin jquerynya silahkan download dulu disini http://www.4shared.com/document/a7xL0t1l/Plugin.html
setelah itu buat form nya
form.php
<html>
<head>
<title>Get Value With Combo</title>
<script type="text/javascript" src="Plugin.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#combo").change(function(){
var combo = $("#combo");
$.ajax({
type : "POST",
url : "ambil_combo.php",
data : "kode="+combo.val(),
success : function(data){
$("#isi").val(data);
}
});
});
});
</script>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db('prepare');
$sql = "select * from kode order by nama asc";
$query = mysql_query($sql);
?>
<select id="combo">
<?php
while($array=mysql_fetch_array($query)) {
?>
<option value="<?php echo $array[0];?>"><?php echo $array[1];?></option>
<?php
}
?>
</select>
<input type="text" id="isi">
</body>
</html>
combo box tersebut datanya dinamis , jika isi table di tambah maka combo box pun akan bertambah . selanjutnya buat satu file untuk mengambil data yang sesuai dengan combo box yang kita pilih
ambil_combo.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('prepare');
$sql = "select * from kode where kode='$_POST[kode]'";
$query = mysql_query($sql);
$array = mysql_fetch_array($query);
echo $array[0];
?>
nah selesai lah sampai disini , data yang keluar adalah data yang dipilih sesuai dengan kode , selamat #mehape dan semoga bermanfaat
No comments:
Post a Comment