Menggunakan Event Onchange Pada Select Box

Sebelumnya saya minta maaf kepada teman-teman karena ternyata sudah lama saya tidak memposting sesuatu di blog ini, mungkin karena kesibukan di dunia nyata :D

Pada kesempatan ini saya akan memberikan tutorial tentang Menggunakan Event Onchange Pada Select Box di PHP. Awalnya inspirasi untuk menulis tutorial ini berasal dari ketika saya membaca sebuah pertanyaan dari salah satu member di group PHP yang saya ikuti di facebook. Saya lihat pertanyaan ini ditanyakan berulang kali oleh beberapa member, maka dari itu kebetulan project yang lagi saya kerjakan ada juga yang menggunakan event onchange tersebut, jadi tidak ada salahnya saya mencoba berbagi kepada teman-teman yang mungkin juga lagi membutuhkan :D

Apa fungsi dari event Onchange tersebut? Mungkin menurut saya fungsi event onchange tersebut adalah menampilkan sesuatu yang kita inginkan berdasarkan value yang kita pilih atau ubah di select box yang kita jadikan sebagai parameter.

Dalam implemetasi kali ini kita coba buat studi kasus tentang menampilkan informasi barang. Jadi informasi barang berupa Nama Barang, Stock Barang, Harga Barang, dll akan ditampilkan ketika kita memilih Id Barang di select Box.

Pertama persiapkan dulu table barang untuk menampung data barang

CREATE TABLE barang (
    id_barang varchar(11),
    nama_barang varchar(30),
    harga_barang decimal(10,0),
    stock_barang int(10),
    PRIMARY KEY(id_barang)
)

INSERT INTO barang (id_barang, nama_barang, harga_barang, stock_barang) VALUES ('brg01', 'Toshiba', '4000000', '10');
INSERT INTO barang (id_barang, nama_barang, harga_barang, stock_barang) VALUES ('brg02', 'Archer', '3000000', '8');
INSERT INTO barang (id_barang, nama_barang, harga_barang, stock_barang) VALUES ('brg03', 'Lenovo', '5000000', '20')

Buat script koneksi ke database
koneksi.php

<?php
$hostdb ="localhost";
$usernamedb ="root";
$passworddb ="";
$database ="learn";
try{
 $con = new PDO("mysql:host=$hostdb;dbname=$database", $usernamedb, $passworddb, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch(PDOException $err){
 echo $err->getMessage();
}
?>

Sekarang buat file index untuk menampilkan form yang berisi select box untuk memilih id barang

index.php

<?php
include ("koneksi.php");
?>
<!DOCTYPE html>
<html>
  <head><title>Lihat Barang</title></head>
  <body>
    <h2>Lihat Barang</h2>
    <fieldset style="width: 20%;">
      <legend>Form Lihat Barang</legend>
      <form action="act-tambah-barang.php" method="POST">
 <p>
   ID Barang<br />
   <select name="id_barang" id="id_barang" onchange="lihatDetail(this);">
      <option value="">Pilih ID</option>
     <?php 
      $idbr = $con->prepare("SELECT id_barang FROM barang");
      $idbr->execute();
      while ($dataid = $idbr->fetch()){
        echo'<option value="'.$dataid["id_barang"].'">'.$dataid["id_barang"].'</option>';
      }
    ?>
   </select>
 </p>
 <div id="dtBarang">
 </div>
 <p>
   <input type="submit" value="Simpan" />
   <input type="reset" value="Reset" onclick="return confirm('hapus data yang telah diinput?')">
   </p>
      </form>
    </fieldset>

 <script src="js/jquery.min.js"></script>
    <script>
    function lihatDetail(sel) {
     var id_barang = sel.options[sel.selectedIndex].value;  
     $("#dtBarang").html( "" );
     if (id_barang.length > 0 ) {
      $.ajax({
       type: "POST",
       url: "ambil-detail.php",
       data: "id_barang="+id_barang,
       cache: false,
       beforeSend: function () {
        $("#dtBarang").html('<img src="img/loader.gif" alt="" width="24" height="24">');
       },
       success: function(html) {    
        $("#dtBarang").html( html );
       }
      });
     }
    }
   </script>
  </body>
</html>

Selanjutnya buat file untuk mengambil detail barang yang dipilih
ambil-detail.php

<?php
 include("koneksi.php");
 $id_barang = ($_REQUEST["id_barang"] <> "") ? trim( addslashes($_REQUEST["id_barang"])) : "";
 //$idbarang ="brg03";
 if ($id_barang <> "" ) {
  $sql = $con->prepare("SELECT nama_barang, harga_barang, stock_barang FROM barang WHERE id_barang=:id_barang");
  $sql->bindParam(":id_barang", $id_barang);
  $sql->execute();
  if ($sql->rowCount() > 0 ) {
   $data = $sql->fetch(PDO::FETCH_ASSOC);
   ?>
   <p>
      Nama Barang<br />
      <input type="text" name="namabarang" value="<?php echo $data['nama_barang']; ?>">
    </p>
    <p>
      Harga Barang<br />
      <input type="text" name="hargabarang" value="<?php echo $data['harga_barang']; ?>">
    </p>
    <p>
      Stock Barang<br />
      <input type="text" name="stockbarang" value="<?php echo $data['stock_barang']; ?>">
    </p>
   <?php
  }
 }
?>

Kemudian buat sebuah folder dengan nama "img", kemudian letakan gambar loader berikut di folder img tersebut

Langkah terakhir, buat lagi sebuah folder dengan nama "js", kemudian download jquery.min.js dan letakan di dalam folder js tersebut

Sekarang silahkan anda buka latihan yang sudah anda buat tersebut