Automatically show data based on dropdown selection
Question
Basically, I have a table with two column: 'Kode Barang' (Item ID) and 'Nama Barang' (Name of Item). The first column is a dropdown option which it's data get populated dynamically from another table. If a user select an Item ID, then the second column will automatically show the name of the item.
Let's say that I've only two row as this code below:
<HTML>
<table id="theTable" border="1">
<thead>
<tr>
<th> Kode Barang </th>
<th> Nama Barang </th>
<tr>
</thead>
<tbody>
<tr>
<td type="text" name="kode_barang" id="kode_barang"/readonly>
<?php
mysql_connect("localhost","root","");
mysql_select_db("skripsi_1");
$result = mysql_query("select * from input_data_barang");
$jsArray = "var kode_barang = new Array();\n";
echo '<select name="kode_barang" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['kode_barang'] . '">' . $row['kode_barang'] . '</option>';
$jsArray .= "kode_barang['" . $row['kode_barang'] . "'] = {name:'" . addslashes($row['nama_barang']) . "',desc:'".addslashes($row['nama_barang'])."'};\n";
}
echo '</select>';
?>
</td>
<td><input type="text" name="nama_barang" id="nama_barang"/readonly>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
};
</script>
</td>
</tr>
<tr>
<td type="text" name="kode_barang" id="kode_barang"/readonly>
<?php
mysql_connect("localhost","root","");
mysql_select_db("skripsi_1");
$result = mysql_query("select * from input_data_barang");
$jsArray = "var kode_barang = new Array();\n";
echo '<select name="kode_barang" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['kode_barang'] . '">' . $row['kode_barang'] . '</option>';
$jsArray .= "kode_barang['" . $row['kode_barang'] . "'] = {name:'" . addslashes($row['nama_barang']) . "',desc:'".addslashes($row['nama_barang'])."'};\n";
}
echo '</select>';
?>
</td>
<td><input type="text" name="nama_barang" id="nama_barang"/readonly>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
};
</script>
</td>
</tr>
</table>
</HTML>
The first row works perfectly. The problem is in the second row. If I select an option from the dropdown, then name of the item doesn't appear in the second row, but appear in the first row instead. Would anybody please show me how to fix this? Thank you.
1 answers
solution1
1 ACCPTED 2017-11-05 09:33:38
You are appending your values using:
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
The problem is, that there is an Element with the ID kode_barang/nama_barang in BOTH rows. So you have 2 Elements for the ID's. Javascript appereantly just decides only to take the first one. Just rename them in the second row to "kode_barang2" and "nama_barang2" and when setting the values change the names too:
document.getElementById('kode_barang2').value = kode_barang[id].name;
document.getElementById('nama_barang2').value = kode_barang[id].desc;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.