php - 当用户从下拉列表中选择一个值时，如何在文本字段中显示两行数据库值

Question

当用户使用下拉列表选择名称时，股票和价格文本字段应自动填写。但不会。

这是代码

<form action="insertout.php" method="post">
<center>
<table>
<tr>
<td width="116">Medicine name</td>
<td width="221">
<center>:
<select name="name" id="name">
<option>--- Choose Medicine ---</option>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("arie");
$sql = mysql_query("SELECT * FROM tabelmedicine ORDER BY name ASC ");
if(mysql_num_rows($sql) != 0){
while($row = mysql_fetch_assoc($sql)){
echo '<option     value="'.$row['price'].' && '.$row['price'].'">'.$row['name'].'</option>';
}
}
?>
</select >
</center>
</p>
</td>
</tr>
<tr>
<td>
<p>Price</p>
</td>
<td>
<p align="center">:<input type="text" name="price" id="price"value="<?php echo ('priceperunit'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<tr>
<td>
<p>Stock</p>
</td>
<td>
<p align="center">:<input type="text" name="stock" id="stock"value="<?php echo ('stock'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<script>
var select = document.getElementById('name');
var input = document.getElementById('price');
var input = document.getElementById('stock');
select.onchange = function(){
    input.value = select.value;
}
</script>

我希望你们能帮忙。我花了一个星期才弄清楚代码。

Answer 1

试试下面的代码，下面是一些注释

避免在选择框价格和股票输入元素属性中使用诸如“名称”之类的关键字
没有正确间隔。
避免使用 Mysql_connect 并开始使用 PDO / MySQLi
避免显示标签并开始使用 css 来实现它，如“text-align:center”

Currently its working as you expected without Ajax and its a quick workaround, I have added the value in a comma separated the both value by split function.

<form action="insertout.php" method="post">
<center>
<table>
<tr>
<td width="116">Medicine name</td>
<td width="221">
<center>:
<select name="name" id="name">
<option>--- Choose Medicine ---</option>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("arie");
$sql = mysql_query("SELECT * FROM tabelmedicine ORDER BY name ASC ");
if(mysql_num_rows($sql) != 0){
while($row = mysql_fetch_assoc($sql)){
// echo '<option     value="'.$row['price'].' && '.$row['price'].'">'.$row['name'].'</option>';
$option_value = $row['price'] . ',' . $row['stock'];
echo '<option value="'.$option_value.'">'.$row['name'].'</option>';
}
}
?>
</select >
</center>
</p>
</td>
</tr>
<tr>
<td>
<p>Price</p>
</td>
<td>
<p align="center">:<input type="text" name="price" id="price"value="<?php echo ('priceperunit'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<tr>
<td>
<p>Stock</p>
</td>
<td>
<p align="center">:<input type="text" name="stock" id="stock"value="<?php echo ('stock'); ?>" onClick="checkprice()">
</p>
</td>
</tr>
<script>
var select = document.getElementById('name');
//var input = document.getElementById('price');
//var input = document.getElementById('stock');
var price = document.getElementById('price');
var stock = document.getElementById('stock');
select.onchange = function(){
    // input.value = select.value;
    var price_stock = select.value.split(',');
    price.value = price_stock[0];
    stock.value = price_stock[1];
}
</script>

Answer 2

这个怎么样.......

主文件

<?php
$medOptions = "";
mysql_connect( "localhost", "root", "");
mysql_select_db( "arie");
$sql = mysql_query( "SELECT * FROM tabelmedicine ORDER BY name ASC ");
if(mysql_num_rows($sql) !=0 ) {
    while($row = mysql_fetch_assoc($sql)) {
        $medOptions .= '<option value="' . $row['id'] . '">' . $row['name'] . '</option>\n';
    }
}
?>
<form>
    <table>
        <tr>
            <td class="label" width="55%">Medicine name</td>
            <td width="45%">
                <select name="med" id="med">
                    <option disabled="true" selected="true">--- Choose Medicine ---</option>
                    <?=$medOptions;?>
                </select>
            </td>
        </tr>
        <tr>
            <td class="label">Price</td>
            <td><input type="text" id="price" readonly="true" /></td>
        </tr>
        <tr>
            <td class="label">Stock</td>
            <td><input type="text" id="stock" readonly="true" /></td>
        </tr>
    </table>

CSS

table {
    margin: 0 auto;
}
td {
    text-align:center;
}
.label {
    font-weight:bold;
}

Javascript

var select = document.getElementById('med');
// INSERT AJAX ROUTINE TO RETRIEVE PRICE AND STOCK LEVEL
var medPrice = document.getElementById('price');
var medStock = document.getElementById('stock');
select.onchange = function () {
    medPrice.value = response.price;
    medStock.value = response.stock;
};