Tutorial Programming

Tutorial menampilkan data pada text berdasarkan combobox dengan PHP


Berikut ini adalah data di database untuk membuat  Combobox dinamis :




Nah dari data di atas kita akan menampilkan "product_id" ke dalam list menu dan kemudian saat di klik maka "product_name" akan langsung tampil di text box , berikut codenya :

<?php    
// Koneksi  
mysql_connect("localhost","root","");    
mysql_select_db("db_ebsof");    
$result = mysql_query("select * from product");  
$jsArray = "var prdName = new Array();\n";  
echo 'Kode Produk : <select name="prdId" onchange="document.getElementById(\'prd_name\').value = prdName[this.value]">';  
echo '<option>-------</option>';  
while ($row = mysql_fetch_array($result)) {  
    echo '<option value="' . $row['product_id'] . '">' . $row['product_id'] . '</option>';  
    $jsArray .= "prdName['" . $row['product_id'] . "'] = '" . addslashes($row['product_name']) . "';\n";  
}  
echo '</select>';  
?>  
  
Nama Produk : <input type="text" name="prod_name" id="prd_name"/>  
<script type="text/javascript">  
<?php echo $jsArray; ?>  
</script> 


Nah dari kode di atas akan ditampilkan di browser seperti dibawah ini :



Dan bagaimana jika kita ingin menambahkan satu buah text box lagi...?

Misalnya .. table di database kita tambahkan "product_desc"  berikut contohnya :



Nah coding untuk menampilkan "produc_name & product_desc" yaitu


<?php    
mysql_connect("localhost","root","");    
mysql_select_db("db_ebsof");    
$result = mysql_query("select * from product");    
$jsArray = "var prdName = new Array();\n";    
echo 'Kode Produk : <select name="prdId" onchange="changeValue(this.value)">';    
echo '<option>-------</option>';    
while ($row = mysql_fetch_array($result)) {    
    echo '<option value="' . $row['product_id'] . '">' . $row['product_id'] . '</option>';    
    $jsArray .= "prdName['" . $row['product_id'] . "'] = {name:'" . addslashes($row['product_name']) . "',desc:'".addslashes($row['product_desc'])."'};\n";    
}    
echo '</select>';    
?>    
   
Nama Produk : <input type="text" name="prod_name" id="prd_name"/>  
  
Keterangan : <input type="text" name="prod_desc" id="prd_desc"/>  
<script type="text/javascript">    
<?php echo $jsArray; ?>  
function changeValue(id){  
document.getElementById('prd_name').value = prdName[id].name;  
document.getElementById('prd_desc').value = prdName[id].desc;  
};  
</script>  


Sehingga hasilnya akan seperti ini :




Sekian tutorial saya semoga bermanfaat yah.

9 comments:

  1. Makasi banyak brow moga sukses slallu dan kami tunggu tutorial berikut nya

    ReplyDelete
  2. Replies
    1. tinggal d tambah aja, berkali lipatan, sesuai dengan array nya?

      Delete
  3. $jsarray bisa dibuat lebih dari satu gak ya?

    ReplyDelete
  4. bagaimana kalau tanpa memilih/klik comboboxt maksud comboboxtnya sudah ada isi apakah textboxnya terisi otomatis gan

    ReplyDelete
  5. Makasi gan tutorialnya sangat membantu !

    ReplyDelete
  6. thanks gan tutorialnya..

    ReplyDelete
  7. Makasih... sangat sangat membantuku.
    sukses!

    ReplyDelete

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.