Jquery: Mengisi Form Input Otomatis Berdasarkan Kata Kunci Tertentu

Ada beberapa kasus yang mengharuskan kita untuk mengisi form input otomatis berdasarkan kata kunci (keyword) tertentu. Misalnya form pembayaran SPP siswa, kita menginginkan pada saat memasukan nis misalnya 001 maka secara otomatis isian nama, alamat, biaya SPP dan lainnya akan terisi. Kasus diatas dapat kita atasi dengan menerapkan JQuery pada form yang akan kita buat.

Berikut langkah-langkah mengisi form input otomatis berdasarkan kata kunci tertentu :

1. Buatlah database dengan nama latihandb kemudian buat tabel siswa dengan fromat seperti berikut

 CREATE TABLE `siswa` (
 `nis` VARCHAR(11) NOT NULL DEFAULT '',
 `nama` VARCHAR(35) DEFAULT NULL,
 `alamat` VARCHAR(50) DEFAULT NULL,
 `biaya_spp` DOUBLE DEFAULT NULL,
 PRIMARY KEY (`nis`)
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
-- ----------------------------
 -- Records
 -- ----------------------------
 INSERT INTO `siswa` VALUES ('001', 'Gunawan', 'Mataram', '100000');
 INSERT INTO `siswa` VALUES ('002', 'M. afif ', 'Mataram', '90000');
 INSERT INTO `siswa` VALUES ('003', 'Fitra', 'Mataram', '120000');

 

2. Buat Form Pembayaran SPP seperti berikut

<html>
 <head>
 <title>Set Input Value Dengan Ajax</title>
 </head>
 <body>
 <h2>JQuery Auto Input Data</h2>
 <table>
 <tr>
 <td>NIS : </td>
 <td><input type="text" id="nis" name="nis"></td>
 </tr>
 <tr>
 <td>Nama : </td>
 <td><input type="text" id="nama" name="nama"></select></td>
 </tr>
 <tr>
 <td>Alamat : </td>
 <td><input type="text" id="alamat" name="alamat"></td>
 </tr>
 
<tr>
 <td>Biaya SPP: </td>
 <td><input type="text" id="biaya" name="biaya"></td>
 </tr>
 </table>
 </body>
 </html>

 

3. Tambahkan framework JQuery pada desain form diatas pada tag <head>...</head> seperti code dibawah

 &lt;script language="javascript" src="jquery.js"&gt;&lt;/script&gt;
 &lt;script language="javascript"&gt;
 $(document).ready(function() {
 $("#nis").keyup(function() {
 var nisp = $('#nis').val();
 $.post('load_data.php', // request ke file load_data.php
 {parent_id: nisp},
 function(data){
 $('#nama').val(data[0].nama);
 $('#alamat').val(data[0].alamat);
 $('#biaya').val(data[0].biaya_spp);
 },'json'
 );
 });
 });
 &lt;/script&gt;

Ok sampai disini proses selesai. untuk mencoba masukan NIS siswa 001 maka secara otomatis nama, alamat dan biaya SPP akan terisi. Pada kasus diatas hanya sekedar contoh bagaimana mengisi form input otomatis berdasarkan kata kunci tertentu silahkan anda edit sendiri sesuai kebutuhan pada form anda..

OK… source code lengkap silahkan download disini

Related Post

Bootstrap: Mengenal Elemen Responsive Table pada B... Bootstrap merupakan framework CSS yang sangat responsive mudah diimplementasikan dengan desain yang menarik dan compatible dengan berbagai jenis brows...
Implementasi Parameter Data Filter pada HTML5 Banyak hal menarik yang bisa kita pelajari pada versi teranyar HTML yaitu HTML5. Pada HTML5 terdapat banyak fitur tambahan salah satunya adalah penamb...
Membuat Image Galery Lightshot Seperti Facebook Setelah mendapatkan kasus bagaimana membuat Image Galery Lightshot seperti facebook pada salah satu project website ada keinginan untuk memposting ata...

3 tanggapan untuk “Jquery: Mengisi Form Input Otomatis Berdasarkan Kata Kunci Tertentu

  1. asrul puadi Balas

    terima kasih atas bantuan kodingan nya mas/mbak. kodingan ini sangat membantu saya dalam memperdalam ilmu pemrograman saya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

16 + 4 =