Tampilkan isi form otomatis setelah pilih data combobox PHP dan Ajax

Robby Prihandaya | 10 November 2017 | AJax, HTML, HTML5, JQuery, MySQL, PHP | 4 Komentar

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.

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;

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 :

<?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']);

<?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 :

<!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>

<!DOCTYPE html>

<html>

<head>

<title>PHPMU.Com - Isi form otomatis PHP, MySQL, Ajax</title>

</head>

<body>

<table>

<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>

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 :

<?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);

<?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… 🙂

About
Latest Posts

Robby Prihandaya

Chief Executive Officer at https://phpmu.com

Robby is an Engineer, Entrepreneur, Thinker and Founder of phpmu.com programming blog. a very popular web development site, Lives in Padang - Indonesia

Latest posts by Robby Prihandaya (see all)

Toko Online dengan Codeigniter dan MySQL + Rajaongkir (POS, JNE, TIKI) - 6 Maret 2018
Tampilkan isi form otomatis setelah pilih data combobox PHP dan Ajax - 10 November 2017
SIASELAH – System Informasi Akademik sekolah Responsive K13 dan KTSP - 8 Agustus 2017

About The Author

Robby Prihandaya

Robby is an Engineer, Entrepreneur, Thinker and Founder of phpmu.com programming blog. a very popular web development site, Lives in Padang - Indonesia

Berikut tahapannya, silahkan di ikuti :

Robby Prihandaya

Latest posts by Robby Prihandaya (see all)

Related Posts

About The Author

Robby Prihandaya