Menampilkan Data di Textbox Berdasarkan Combobox

Publish Date : 02-01-2017 , dibaca 30215 kali, Hari ini dibaca : 1 kali ,0 comments

Menampilkan Data di textbox / textfield berdasarkan combobox, Jika sebelumnya admin sudah menulis artikel Menampilkan data Berdasarkan Selectbox dg Javascript , kali ini kita akan membahas Cara Menampilkan data di textbox / textfield berdasarkan combobox, Namun ini berlaku untuk data yang tidak di ambil dari database, Untuk data yang diambil dari database, akan saya bahas di tutorial selanjutnya.. ayuk.. simak tutorial dibawah ini :

Cara Menampilkan Data Berdasarkan Combobox / Selectbox dengan Javascript

Berikut ini merupakan studi kasus , jika ID diklik di combobox/ selectbox , maka data nama dan email akan langsung terisi secara otomatis , Berikut ini codenya :

CODE HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
<script>
function tampilkan(){
  var id_user=document.getElementById("form1").kategori.value;
  if (id_user=="ID-100")
    {
        document.getElementById("nama").value = 'Ali';
        document.getElementById("email").value = 'ali@gmail.com';
    }
  else if (id_user=="ID-200")
    {
       document.getElementById("nama").value = 'Joko';
      document.getElementById("email").value = 'joko@gmail.com'; 
    }
}
</script>
</head>
<body>
<h2>Suckittrees.com</h2>
<form id="form1" name="form1" onsubmit="return false">
  <label>Pilih Kategori: </label>
  <select id="kategori" name="kategori" onchange="tampilkan()">
    <option value='0' disabled="disabled" selected/>Pilih</option>
    <option value="ID-100">ID-100</option>
    <option value="ID-200">ID-200</option>
  </select>
  <br/><br/>
   <label>Nama : </label> <input type='text' id="nama" name="nama"><br/><br/>
   <label>Email : </label> <input type='text' id="email" name="email">
</form>

</body>
</html>