Tampil data di beberapa textbox Berdasarkan Combobox

Posted in PHP MYSQLi Life at 22 Juli 2018 With 0 Comments

Menampilkan data dari database ke Textbox berdasarkan combobox memang sudah dibahas pada artikel sebelumnya (Menampilkan data dari database di textbox melalui Combobox)..

Nah artikel ini merupakan kelanjutan dari artikel sebelumya dalam menampilkan data lebih dari satu textbox berdasarkan combobox, tentunya berdasarkan data yang ada di dalam database. Nah bagaimana caranya.. ?? Yuk kita lanjut lagi.

Tentunya kasus seperti ini sering kita jumpai dalam pembuatan aplikasi berbasis website... Contohnya dapat kita lihat pada gambar dibawah ini

menampilkan data di textbox lebih dari satu berdasarkan combobox

Nah.. pada gambar diatas , merupakan contoh studi kasus sederhana dalam menampilkan data dari database ke textbox berdasarkan combobox yang kita pilih, untuk scriptnya perhatikan dibawah ini :

Database

CREATE TABLE IF NOT EXISTS `tb_asesmen` (
  `id_asesmen` int(11) NOT NULL AUTO_INCREMENT,
  `tanggal_ujikom` date NOT NULL,
  `nim` varchar(13) NOT NULL,
  `nama_asesi` varchar(100) NOT NULL,
  `kode_tuk` varchar(3) NOT NULL,
  `nama_tuk` varchar(100) NOT NULL,
  PRIMARY KEY (`id_asesmen`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

Insertkan  di tb_asesmen

INSERT INTO `tb_asesmen` (`id_asesmen`, `tanggal_ujikom`, `nim`, `nama_asesi`, `kode_tuk`, `nama_tuk`) VALUES
(1, '2018-06-14', '123456785', 'juki', '001', 'Kampus Pasar Minggu'),
(2, '2018-06-23', '123456789', 'jeki', '002', 'Kampus Kramat'),
(3, '0000-00-00', '123456785', 'juki', '001', 'Kampus Pasar Minggu'),
(4, '0000-00-00', '123456785', 'juki', '001', 'Kampus Pasar Minggu');

Jangan lupa buat Koneksi ke database

<?php
$con = mysqli_connect("localhost", "root","", "db_suckittrees");
?>

Combobox / Selectbox

<select name="nim" id="nim" class="form-control" onchange='changeValue(this.value)' required>
  <option value="">-Pilih-</option>
 <?php
 $query=mysqli_query($con, "select * from tb_asesi order by nim asc");
 $result = mysqli_query($con, "select * from tb_asesi");  
 $jsArray = "var prdName = new Array();\n";
 while ($row = mysqli_fetch_array($result)) {  
 echo '<option name="nim"  value="' . $row['nim'] . '">' . $row['nim'] . '</option>';  
 $jsArray .= "prdName['" . $row['nim'] . "'] = {nama_asesi:'" . addslashes($row['nama_asesi']) . "',kode_tuk:'".addslashes($row['kode_tuk'])."',nama_tuk:'".addslashes($row['nama_tuk'])."'};\n";
  }
  ?>
</select>

 Nah untuk textbox nya :

<div class="form-group">
    <label>Nama Asesi</label>
    <input class="form-control"  name="nama_asesi" id="nama_asesi" readonly />      
</div>
<div class="form-group">
    <label>Kode TUK</label>
    <input class="form-control" name="kode_tuk" id="kode_tuk" readonly/>      
</div>
<div class="form-group">
    <label>Nama TUK</label>
    <input class="form-control"  name="nama_tuk" id="nama_tuk" readonly />      
</div>

Javascript : (Tempatkan pada baris paling bawah setelah tag </html>)

<script type="text/javascript"> 
<?php echo $jsArray; ?>
function changeValue(id){
    document.getElementById('nama_asesi').value = prdName[id].nama_asesi;
    document.getElementById('kode_tuk').value = prdName[id].kode_tuk;
    document.getElementById('nama_tuk').value = prdName[id].nama_tuk;
};
</script>

Pada kode diatas, perhatikan highlight yang sudah saya tandai dengan warna kuning dan biru,, silahkan dipahami, ingat yang saya berikan background itu merupakan point penting yang harus sama..

Demikian artikel cara menampilkan data lebih dari satu di textbox berdasarkan combobox yang dipilih semoga bermanfaat.

Artikel Rekomendasi

Artikel Terkait

Diskusi

wa