Friday, December 12, 2014

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.
:)


*sebenarnya bikin tutorial ini dan diposting disini buat pengingat diri sendiri dan siapa tahu bermanfaat juga buat yang lain.

55 comments:

  1. ijin copy paste script Menampilkan Data Dari ComboBox ke TextField di PHP nya mbak.
    terimkasih banyak :)
    salam programer, ari :)

    ReplyDelete
  2. thnx untuk posinganya ..
    oiya klo boleh tau klo misalnya di bikin dua combobox yang berbeda dari 2 table yang berbeda seperti apa yah apa yg di ganti soalnya saya sdh coba coba klo di jalankan 1 combobox mau satunya jadi gk mau ... thnx

    ReplyDelete
  3. Tlg gimana caranya dua combobox yg berbeda dari dua tabel yg berbeda??

    ReplyDelete
  4. Tlg gimana caranya dua combobox yg berbeda dari dua tabel yg berbeda??
    misal :
    tabel Pertama : taJenis
    (KodeJenis, NamaJenis)
    tabel Kedua : taMerk
    (KodeMerk, NamaMerk)

    combobox pertama menampilkan tabel Pertama
    combobox kedua menampilkan tabel kedua

    ReplyDelete
    Replies
    1. combo yg ke 1 kan ini:
      onchange="changeValue(this.value)"

      combo yg ke 2 jangan sama, ganti jadi ini:
      onchange="changeid(this.value)"

      jangan lupa ini juga:
      function changeValue(nim){
      jadi
      function changeid(nim){

      Delete
    2. kak kok gak bisa tampil fieldnya dari combobox1nya...mohon bantuannya kak :)

      Delete
    3. This comment has been removed by a blog administrator.

      Delete
    4. This comment has been removed by a blog administrator.

      Delete
    5. SAMA, data combobox pertama ga tampil

      Delete
    6. udah bisa, caranya hilangkan $jsArray = "var data = new Array();\n"; di combobox ke-2 trus sesuaikan variabelnya.. (varibel diatas yg saya gunakan namanya data)

      Delete
    7. Contoh Lengkapnya bagaimana?

      Delete
    8. Alhamdulillah udah bisa untuk 2 ComboBox, yang jadi masalah sekarang untuk Editnya bagaimana?????

      Delete
  5. thanks banget buat adminnya ,

    ReplyDelete
  6. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    ReplyDelete
  7. bagaimana kalau misalnya buat edit?, kan datanya harus otomatis juga berisi nilai ?

    ReplyDelete
  8. terima kasih ya source code sangat membantu sekali

    memecahkan masalah saya
    sangat bermanfaat :-)

    ReplyDelete
  9. setelah kita tampilkan datanya trus cara simpan ke tabellain lagi gmna?

    ReplyDelete
  10. bagaimana kalau texfieldnya adalah radio button, saya sudah coba nggak bisa2 mbak, mohon bantuannya untuk admin dan semua pengunjung,trim.s

    ReplyDelete
  11. Bagaimana jika menampilkan data dari table yg berbeda, klo ini kan dari 1 tabel saja.
    Terimakasih atas perhatian nya
    #relasi menggunakan id foreign key

    ReplyDelete
  12. Makasih Banyak Brow Atas Koding nya

    ReplyDelete
  13. yeee makasih sudah berbagi xoxo

    ReplyDelete
  14. terima kasih sudha membantu sekali.. semoga ilmunya terus berkembang yah

    ReplyDelete
  15. erima kasih namum saya mau tanya bagaimana cara update hasil combo box ke text field ya?

    ReplyDelete
  16. terimah kasih atas ilmunya gan
    mengenai combobox yg berbeda dari dua tabel yg berbeda
    silahkan ganti
    onchange="changeValue menjadi (onchange="changeValue1)
    function changeValue menjadi (function changeValue1)
    dan saya sudah membuktikan dan berhasil

    ReplyDelete
  17. gan, kalo mw nampilin datanya gmn, misalnya mw diedit. datanya juga kan harus terisi otomatis?

    ReplyDelete
  18. kok punya ane masih gak jadi ya gan?.

    ReplyDelete
  19. makasih banyak, gan sangat membantu

    ReplyDelete
  20. Kalo udh d combobox dan tampil k text box trus mau simpah nya gmn y ?

    ReplyDelete
    Replies
    1. tgl di kadih form sama button (kalo dari ini brati
      < form action="simpan.php" method="post">
      < table >
      ini kan isi dari contoh ini kan...
      sebelum ahir table, tambahkan code tombol misal:
      < input type="submit" value="simpan"/>


      )

      semoga membantu

      Delete
  21. gan kalo kita mau menampilkan foto dengan combobox gmana ya...mohon bantuanya
    minoalves4@gmail.com

    ReplyDelete
  22. kalau isinya di ganti dengan nomer kok undefined ya kak ? mohon bantuan

    ReplyDelete
  23. Terima kasih atas sharingnya, gan. Lain waktu mungkin akan saya coba scriptnya supaya bisa pilih combobox lalu dengan ajax otomatis bisa keluar di isian.

    Kunjungi blog saya ya: https://tedsu.mahasiswa.atmaluhur.ac.id
    dan website kampus saya: http://www.atmaluhur.ac.id

    ReplyDelete
  24. sebelum saya komen disini , saya sudah pernah dapat matkul ini . dengan membaca ii saya lebih memahami lagi tentang combobox .

    blog ini memberi wawasan lebih saya .
    makasih gan , udah baca komen saya .
    tolong jangan di hapus ya min ..

    jangan lupa kunjungi website saya di : https://ria.mahasiswa.atmaluhur.ac.id/

    dan website kampus saya
    di : http://www.atmaluhur.ac.id

    ReplyDelete
  25. terima kasih sudah sharing ilmunya mengenai combobox yg berbeda dari dua tabel yg berbeda ..
    Kunjungi juga website saya di : https://bagussmj.mahasiswa.atmaluhur.ac.id/
    dan website kampus saya di : http://www.atmaluhur.ac.id/

    ReplyDelete
  26. dari sekian tutorial akhirnya pake cara ini work!! terima kasiiiiih

    ReplyDelete
  27. kalau comboboxnya diganti textbox gimana ya? saya udah coba tapi gagal.

    ReplyDelete
  28. untuk form inputnya saya sdh bisa kak, kalo mau bkin editnya gmn ya kak ? menampilkan data yg sdh kita pilih sebelumnya dan untuk melakukan perubahan data pada combo nya ? gmn caranya ?

    ReplyDelete
  29. Mantap kali... jempol jempol jempol jempol

    ReplyDelete
  30. Replies
    1. Bedakan bagian onchange="changeValue dan function changeValue

      Delete