Mengisi salah satu field di form secara otomatis
Kembali lagi di coretan-coretan kecil dari programmer goBlog. Tulisan kita kali ini akan membahas tentang bagaimana mengisi sebuah field tertentu pada form berdasarkan inputan pada fiel lain.
Tulisan ini dilatar belakangi pertanyaan salah seorang teman yang bertanya "Misalkan ada form data mahasiswa dengan field NPM dan nama, apakah bisa field nama terisi otomatis ketika kita mengisikan NPM pada field npm?"
Jawabanya tentu saja bisa.
Pada studi kasus yang akan kita bahas ini, kita akan menerapkanya pada form di sebuah website.
Kali ini kita akan memanfaatkan salah satu framework javascript yang cukup merakyat yaitu jQuery dan kemampuan ajax yang dimilikinya.
Kita buat dulu sebuah database dengan nama datamahasiswa, kemudian buat satu tabel dengan nama mahasiswa dengan dua field npm sebagai primary key dan nama.
--------------------------------------------------------
CREATE DATABASE datamahasiswa;
use datamahasiswa;
create table mahasiswa(
npm int not null PRIMARY KEY,
nama varchar(30) not null
);
insert into mahasiswa(
npm, nama) VALUES (10753001,'Nama Mahasiswa1');
insert into mahasiswa(
npm, nama) VALUES (10753002,'Nama Mahasiswa2');
insert into mahasiswa(
npm, nama) VALUES (10753003,'Nama Mahasiswa3');
insert into mahasiswa(
npm, nama) VALUES (10753004,'Nama Mahasiswa4');
--------------------------------------------------------
Selanjutnya kita buat file form.html dan ajaxrespon.php
form.html ini kita gunakan untuk menampilkan form kita.sedangkan ajaxrespon.php akan kita gunakan untuk menangani ajaxrequest dari jQuery kita pada form yang kita buat.
isi dari form.html
<!DOCTYPE html>
<html>
<head>
<title>BELAJAR AJAX</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- INCLUDE jQuery -->
</head>
<body>
<form action="#" method="post">
<input type="text" name="npm" id="npm" placeholder="NPM">
<input type="text" name="nama" id="nama" placeholder="Nama">
<input type="submit" value="simpan">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#npm').change(function(){ // KETIKA ISI DARI FIEL 'NPM' BERUBAH MAKA ......
var npmfromfield = $('#npm').val(); // AMBIL isi dari fiel NPM masukkan variabel 'npmfromfield'
$.ajax({ // Memulai ajax
method: "POST",
url: "ajaxrespon.php", // file PHP yang akan merespon ajax
data: { npm: npmfromfield} // data POST yang akan dikirim
})
.done(function( hasilajax ) { // KETIKA PROSES Ajax Request Selesai
$('#nama').val(hasilajax); // Isikan hasil dari ajak ke field 'nama'
});
})
});
</script>
</body>
</html>
isi script ajaxrespon.php
<?php
$koneksi = mysql_connect("localhost","root",""); // BUKA KONEKSI DENGAN DATABASE MYSQL
// host : localhost - user : root - password : kosong
$db = mysql_select_db('datamahasiswa'); // TENTUKAN NAMA DATABASE
$npm = $_POST['npm']; // Menerima NPM dari JQuery Ajax dari form
$s = mysql_query("select * from mahasiswa where npm='$npm'"); // Ambil nama mahasiswa berdasarkan npm yang dikirim dari jquery ajax
while ($data = mysql_fetch_array($s)) {
echo $data[1]; // Print nama hasil perolehan dari query database
}
?>
Demikian coretan kecil dari programmer goBlog kali ini apabila ada pertanyaan jangan ragu untuk meninggalkan jejak di kolom komentar.
Semoga bermanfaat.
.png)
Comments
Post a Comment