Tampilkan isi form otomatis setelah pilih data combobox PHP dan Ajax
|Mungkin tidak asing lagi jika melihat pada sebuah form dimana jika pilihan combobox terpilih maka data yang terkait akan tampil secara otomatis pada semua inputan di form. untuk membuatnya kita akan menggunakan PHP, Ajax dan MySQL, prosesnya ketika data di combobox terpilih maka value yang dikirimkan via ajax akan di proses dan di cek ke database, jika ditemukan maka data akan ditampilkan ke semua inputan form.
Berikut tahapannya, silahkan di ikuti :
1. Siapkan database,Tablenya, dan beberapa record data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
CREATE TABLE `pegawai` ( `id_pegawai` int(11) NOT NULL, `nip` varchar(50) NOT NULL, `nama_pegawai` varchar(255) NOT NULL, `jenis_kelamin` enum('laki-laki','perempuan') NOT NULL, `alamat` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `pegawai` (`id_pegawai`, `nip`, `nama_pegawai`, `jenis_kelamin`, `alamat`) VALUES (1, '1234567', 'Robby Prihandaya', 'laki-laki', 'Jl. Angkasa Puri, Perundam 4, Tunggul HItam'), (2, '3334897', 'Dewiit Safitri', 'perempuan', 'Jl. LInggar Jati VI, No 16 C, Tabing'), (3, '8902344', 'Muhammad Arsenio', 'laki-laki', 'Jl. Angkasa Raya, Banjarnegoto, Ulak Karang'); ALTER TABLE `pegawai` ADD PRIMARY KEY (`id_pegawai`); ALTER TABLE `pegawai` MODIFY `id_pegawai` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; |
2. Koneksi ke Database
Hal pertama yang harus dilakukan adalah membuat koneksi ke database, kode koneksi berguna untuk menghubungkan antara program kita ke sebuah database, untuk koneksi umumnya ditempatkan dengan sebuah file yaitu koneksi.php :
1 2 3 4 5 6 7 |
<?php // Koneksi ke database $db['host'] = "localhost"; //host $db['user'] = "root"; //username database $db['pass'] = ""; //password database $db['name'] = "db_otomatis"; //nama database $koneksi = mysqli_connect($db['host'], $db['user'], $db['pass'], $db['name']); |
3. Membuat halaman form
Selanjutnya kita buatkan form yang akan menjadi wadah memilih dan sekaligus menampung hasil data terkait yang dipilih. buatlah sebuah file dengan nama index.php, dan isikan dengan script berikut ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <title>PHPMU.Com - Isi form otomatis PHP, MySQL, Ajax</title> </head> <body> <form action=""> <table> <tr><td>NIP</td><td> <select onchange="cek_database()" id="nip"> <option value='' selected>- Pilih -</option> <?php include "koneksi.php"; $pegawai = mysqli_query($koneksi,"SELECT * FROM pegawai"); while ($row = mysqli_fetch_array($pegawai)) { echo "<option value='$row[nip]'>$row[nip]</option>"; } ?> </select></td></tr> <tr><td>Nama Pegawai</td><td> <input type="text" id="nama_pegawai"></td></tr> <tr><td>Jenis Kelamin</td><td><input type="radio" name="jenis_kelamin" value="laki-laki"/> Laki-laki <input type="radio" name="jenis_kelamin" value="perempuan"/>Perempuan</td></tr> <tr><td>Alamat</td><td> <textarea id="alamat" style='width:300px'></textarea></td></tr> </table> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> function cek_database(){ var nip = $("#nip").val(); $.ajax({ url: 'ajax_cek.php', data:"nip="+nip , }).success(function (data) { var json = data, obj = JSON.parse(json); $('#nama_pegawai').val(obj.nama_pegawai); $('#alamat').val(obj.alamat); var $jenis_kelamin = $('input:radio[name=jenis_kelamin]'); if(obj.jenis_kelamin == 'laki-laki'){ $jenis_kelamin.filter('[value=laki-laki]').prop('checked', true); }else{ $jenis_kelamin.filter('[value=perempuan]').prop('checked', true); } }); } </script> </body> </html> |
4. Proses data yang terpilih dengan Ajax
Selanjutnya kita akan membuat sebuah file baru untuk memproses data yang dikirimkan dari combobox nip, dan selanjutnya di proses/cek ke database dan kemudian data akan dikembalikan dalam json. buatlah file dengan nama ajax_cek.php, ketikkan kode berikut :
1 2 3 4 5 6 7 |
<?php include "koneksi.php"; $pegawai = mysqli_fetch_array(mysqli_query($koneksi, "select * from pegawai where nip='$_GET[nip]'")); $data_pegawai = array('nama_pegawai' => $pegawai['nama_pegawai'], 'jenis_kelamin' => $pegawai['jenis_kelamin'], 'alamat' => $pegawai['alamat'],); echo json_encode($data_pegawai); |
Selesai dan berikut penampakan dari hasil akhirnya :
Bagaimana Cukup mudah bukan? silahkan dicobakan dan semoga bermanfaat, jika ada yang perlu ditanyakan silahkan meninggalkan komentar pada form dibawah ini atau juga bisa melalui forum komunitas members area phpmu.com di https://members.phpmu.com/forum dan sampai jumpa lagi di artikel menarik lainnya… 🙂