Menampilkan Data di Textbox dari Database Berdasarkan Dropdown - Mari Belajar Coding

11 Mei 2019

Menampilkan Data di Textbox dari Database Berdasarkan Dropdown

maribelajarcoding         

Menampilkan Data di Textbox dari Database Berdasarkan Dropdown

Selamat datang di blog mari belajar coding. Pada tutorial kali ini kita akan belajar menampilkan data di textbox atau textfield dari database mysql berdasarkan dropdown select option yang dipilih dengan PHP. 
Menampilkan Data di Textbox dari Database Berdasarkan Dropdown 

 1. Buat database terlebih dahulu. Contoh database akademik dengan dua tabel bernama tabel mahasiswa dan tabel jurusan. 
-- Buat database akademik
CREATE DATABASE `akademik`;
USE `akademik`;

CREATE TABLE `mahasiswa` (
`nim` varchar(15),
`nama` varchar(40),
`alamat` text,
`jurusan` int(11),
PRIMARY KEY (`nim`)
);

CREATE TABLE `jurusan` (
`id_jurusan` varchar(11),
`jurusan` varchar(255),
PRIMARY KEY (`id_jurusan`)
);

 2. Insert data kedalam tabel. 
INSERT INTO `mahasiswa` VALUES ('1234', 'Agung Saputra', 'Jakarta', '1');
INSERT INTO `mahasiswa` VALUES ('12355', 'Angga', 'Bandung', '2');

INSERT INTO `jurusan` VALUES ('1', 'Teknik Informatika');
INSERT INTO `jurusan` VALUES ('2', 'Sistem Informasi');
INSERT INTO `jurusan` VALUES ('3', 'Manajemen Informatika');

 3. Buat koneksi PHP untuk menghubungkan dengan database.
<?php 
 mysql_connect("localhost","root","");
 mysql_select_db("akademik");
?>

 4. Buat form untuk menampilkan dropdown dan textbox.
<table> 
 <form>
  <tr>
   <td>NIM</td>
   <td>
    <select id="nim" name="nim" onchange="changeValue(this.value)">
     <option disabled="" selected="">Pilih</option>
     <?php 
       $sql=mysql_query("SELECT * FROM mahasiswa");
       $jsArray = "var prdName = new Array();\n";
       while ($data=mysql_fetch_array($sql)) {
      
        echo '<option value="'.$data['nim'].'">'.$data['nim'].'</option> ';
        $jsArray .= "prdName['" . $data['nim'] . "'] = {nama:'" . addslashes($data['nama']) . "'};\n";
      
       }
      ?>
    </select>
   </td>
  </tr>
  <tr>
   <td>Nama</td>
   <td><input type="text" name="nama" id="nama"></td>
  </tr>
 
  <tr>
   <td></td>
   <td><input type="submit" name="simpan" value="Simpan"></td>
  </tr>
 </form>
</table>

 5. Buat fungsi onchange dengan javascript. Saat dropdown di pilih, textbox otomatis akan terisi sesuai data yang dipilih.

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

6. Kode lengkap.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <?php 
  mysql_connect("localhost","root","");
   mysql_select_db("akademik");

 ?>
</head>
<body>
 <h2>maribelajarcoding.com</h2>
<table> 
 <form>
  <tr>
   <td>NIM</td>
   <td>
    <select id="nim" name="nim" onchange="changeValue(this.value)">
     <option disabled="" selected="">Pilih</option>
     <?php 
       $sql=mysql_query("SELECT * FROM mahasiswa");
       $jsArray = "var prdName = new Array();\n";
       while ($data=mysql_fetch_array($sql)) {
      
        echo '<option value="'.$data['nim'].'">'.$data['nim'].'</option> ';
        $jsArray .= "prdName['" . $data['nim'] . "'] = {nama:'" . addslashes($data['nama']) . "'};\n";
      
       }
      ?>
    </select>
   </td>
  </tr>
  <tr>
   <td>Nama</td>
   <td><input type="text" name="nama" id="nama"></td>
  </tr>
 
  <tr>
   <td></td>
   <td><input type="submit" name="simpan" value="Simpan"></td>
  </tr>
 </form>
</table>
  <script type="text/javascript">    
    <?php echo $jsArray; ?>  
    function changeValue(x){  
    document.getElementById('nama').value = prdName[x].nama;   
    };  
    </script> 
</body>
</html>

7. Tampilan jika program dijalankan.
Menampilkan Data di Textbox dari Database Berdasarkan Dropdown

 8. Untuk membuat 2 pilihan dropdown. Tambahkan satu tag select option lagi di bawah textbox nama. Contoh.
<table> 
 <form>
  <tr>
   <td>NIM</td>
   <td>
    <select id="nim" name="nim" onchange="changeValueNIM(this.value)">
     <option disabled="" selected="">Pilih</option>
     <?php 
       $sql=mysql_query("SELECT * FROM mahasiswa");
       $jsArray = "var prdName = new Array();\n";
       while ($data=mysql_fetch_array($sql)) {
      
        echo '<option value="'.$data['nim'].'">'.$data['nim'].'</option> ';
        $jsArray .= "prdName['" . $data['nim'] . "'] = {nama:'" . addslashes($data['nama']) . "'};\n";
      
       }
      ?>
    </select>
   </td>
  </tr>
  <tr>
   <td>Nama</td>
   <td><input type="text" name="nama" id="nama"></td>
  </tr>

  <tr>
   <td>ID Jurusan</td>
   <td>
    <select id="idjurusan" name="idjurusan" onchange="changeValueJurusan(this.value)">
     <option disabled="" selected="">Pilih</option>
     <?php 
       $sql=mysql_query("SELECT * FROM jurusan");
       $jsArrayJurusan = "var prdJurusan = new Array();\n";
       while ($data=mysql_fetch_array($sql)) {
      
        echo '<option value="'.$data['id_jurusan'].'">'.$data['id_jurusan'].'</option> ';
        $jsArrayJurusan .= "prdJurusan['" . $data['id_jurusan'] . "'] = {jurusan:'" . addslashes($data['jurusan']) . "'};\n";
      
       }
      ?>
    </select>
   </td>
  </tr>
  <tr>
   <td>Jurusan</td>
   <td><input type="text" name="jurusan" id="jurusan"></td>
  </tr>
 
  <tr>
   <td></td>
   <td><input type="submit" name="simpan" value="Simpan"></td>
  </tr>
 </form>
</table>

9. Buat fungsi onchange dengan javascript.
<script type="text/javascript">    
    <?php echo $jsArray; ?>  
    function changeValueNIM(x){  
    document.getElementById('nama').value = prdName[x].nama;   
    };  

    <?php echo $jsArrayJurusan; ?>  
    function changeValueJurusan(x){  
    document.getElementById('jurusan').value = prdJurusan[x].jurusan;   
    }; 
    </script>

10. Kode lengkap.
<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <?php 
  mysql_connect("localhost","root","");
  mysql_select_db("akademik");
 ?>
</head>
<body>
 <h2>maribelajarcoding.com</h2>
<table> 
 <form>
  <tr>
   <td>NIM</td>
   <td>
    <select id="nim" name="nim" onchange="changeValueNIM(this.value)">
     <option disabled="" selected="">Pilih</option>
     <?php 
       $sql=mysql_query("SELECT * FROM mahasiswa");
       $jsArray = "var prdName = new Array();\n";
       while ($data=mysql_fetch_array($sql)) {
      
        echo '<option value="'.$data['nim'].'">'.$data['nim'].'</option> ';
        $jsArray .= "prdName['" . $data['nim'] . "'] = {nama:'" . addslashes($data['nama']) . "'};\n";
      
       }
      ?>
    </select>
   </td>
  </tr>
  <tr>
   <td>Nama</td>
   <td><input type="text" name="nama" id="nama"></td>
  </tr>

  <tr>
   <td>ID Jurusan</td>
   <td>
    <select id="idjurusan" name="idjurusan" onchange="changeValueJurusan(this.value)">
     <option disabled="" selected="">Pilih</option>
     <?php 
       $sql=mysql_query("SELECT * FROM jurusan");
       $jsArrayJurusan = "var prdJurusan = new Array();\n";
       while ($data=mysql_fetch_array($sql)) {
      
        echo '<option value="'.$data['id_jurusan'].'">'.$data['id_jurusan'].'</option> ';
        $jsArrayJurusan .= "prdJurusan['" . $data['id_jurusan'] . "'] = {jurusan:'" . addslashes($data['jurusan']) . "'};\n";
      
       }
      ?>
    </select>
   </td>
  </tr>
  <tr>
   <td>Jurusan</td>
   <td><input type="text" name="jurusan" id="jurusan"></td>
  </tr>
 
  <tr>
   <td></td>
   <td><input type="submit" name="simpan" value="Simpan"></td>
  </tr>
 </form>
</table>
  <script type="text/javascript">    
    <?php echo $jsArray; ?>  
    function changeValueNIM(x){  
    document.getElementById('nama').value = prdName[x].nama;   
    };  

    <?php echo $jsArrayJurusan; ?>  
    function changeValueJurusan(x){  
    document.getElementById('jurusan').value = prdJurusan[x].jurusan;   
    }; 
    </script> 
</body>
</html>

11. Tampilan jika program dijalankan.
Menampilkan Data di Textbox dari Database Berdasarkan Dropdown

Source code:
dropdown.rar 

Related search:
Menampilkan data di textbox berdasarkan dropdown
Menampilkan data di textfield berdasarkan dropdown
Menampilkan data di textbox berdasarkan combobox

Related Posts

Load comments