Menampilkan Data Dari ComboBox ke TextField di PHP


Pada tutorial ini data dari combobox yang diambil dari database akan ditampilkan pada textfield.
Buatlah database dengan nama: dbakademik
Buat tabel dengan nama: tb_mhs
Buat field yaitu: nim, nama, jurusan dan lalu isilah seperti contoh pada gambar di bawah ini.

Buat file .php dan berikut ini adalah scriptnya:
     <?php   
    mysql_connect("localhost","root","");   
    mysql_select_db("dbakademik");  
    ?>
<title>Combobox</title>

<p></p>
    <table width="451" border="0" align="center">
      <tr>
        <td width="118">NIM</td>
        <td width="323"><select name="nim" id="nim" onchange="changeValue(this.value)" >
        <option value=0>-Pilih-</option>
        <?php
    $result = mysql_query("select * from tb_mhs");   
    $jsArray = "var dtMhs = new Array();\n";       
    while ($row = mysql_fetch_array($result)) {   
        echo '<option value="' . $row['nim'] . '">' . $row['nim'] . '</option>';   
        $jsArray .= "dtMhs['" . $row['nim'] . "'] = {nama:'" . addslashes($row['nama']) . "',jrsn:'".addslashes($row['jurusan'])."'};\n";   
    }     
    ?>   
        </select></td>
      </tr>
      <tr>
        <td>Nama Mahasiswa</td>
        <td><input type="text" name="nm" id="nm"/></td>
      </tr>
      <tr>
        <td>Jurusan</td>
        <td><input type="text" name="jrsn" id="jrsn"/></td>
      </tr>
    </table>
      <script type="text/javascript">   
    <?php echo $jsArray; ?> 
    function changeValue(nim){ 
    document.getElementById('nm').value = dtMhs[nim].nama; 
    document.getElementById('jrsn').value = dtMhs[nim].jrsn; 
    }; 
    </script>
     
Berikut adalah tampilan ketika dijalankan. Combobox NIM berisi NIM yang datanya mengambil dari tb_mhs.


Berikut ini Tampilan ketika salah satu IM dipilih. Nama serta jurusan akan tampil pada textfield.


Fin.
Happy Coding.
Alhamdulillah.
:)

Comments

  1. trus dsimpannya gmn ya klo di table yg berbeda

    ReplyDelete
  2. minoalves4@gmail.com
    Gan kalo kita menampilkan foto dengan combobox gmana ya...........

    ReplyDelete
  3. minoalves4@gmail.com
    Gan kalo kita menampilkan foto dengan combobox gmana ya...........

    ReplyDelete

Post a Comment

Popular posts from this blog

Cara Menampilkan Hasil Form HTML dengan JavaScript

Validasi Input