在PHP中创建onchange / oninput侦听器
我正在尝试在表中创建一个onchange / oninput侦听器，以将价格和订购数量相乘以显示在“总成本”列中。数据是通过SQL数据库引入的。PHP部分可能有一个我无法识别的错误。
<script type="text/javascript">
function Multiply(f){
var myBox1 = document.getElementById('editedvalues[]').value;
var myBox2 = document.getElementById('price').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2;
result.value = myResult;
}
}
</script>
$sql = "SELECT item_price.item_id, item_price.ITEM_NAME,suggested_qty,Price_item
FROM item_price JOIN suggested_item
ON item_price.ITEM_NAME = suggested_item.ITEM_NAME";
$result = $conn->query($sql);
?>
<form action="#" method="post">
<tr>
<th> ID</th>
<th>Item Name</th>
<th>Suggested Quantity</th>
<th>Order Quantity</th>
<th>Total Cost ($)</th>
</tr>
<?php
while ($row = $result->fetch_assoc())
{
echo "<tr>";
echo "<td>" . $row['item_id'] ."</td>";
echo "<td>" . $row['ITEM_NAME'] . "</td>";
echo "<td>" . $row['suggested_qty'] . "</td>";
echo "<td>" . $row['Price_item'] . "</td>";
echo "<td><input type='text' name='editedvalues[]' value='" . $row['suggested_qty'] . "' oninput="Multiply()" /></td>";
echo "<td><input name='result' /></td>";
echo "</tr>";
}
?>
</table>
</form>
莫回无浏览 248回答 2
2回答
-
繁花如伊
我猜想您会收到unexpected <错误消息，因为尽管<?php复制粘贴代码段中缺少开始标记，但实际代码中可能没有该标记，并且您直接编写了javascript代码段，而没有将其包含在回显中。或者，否则将其移到php标签之外<?php ?>。您还可以获得其他javascript结束标记。代替：<?php<script type="text/javascript"> function Multiply(){ var myBox1 = document.getElementById('editedvalues[]').value; var myBox2 = document.getElementById('price').value; var result = document.getElementById('result'); var myResult = myBox1 * myBox2; result.value = myResult; } } </script>$sql = "SELECT item_price.item_id, item_price.ITEM_NAME,suggested_qty,Price_itemFROM item_price JOIN suggested_item ON item_price.ITEM_NAME = suggested_item.ITEM_NAME";$result = $conn->query($sql);?>试试这个：<script type="text/javascript"> function Multiply() { var myBox1 = document.getElementById('editedvalues[]').value; var myBox2 = document.getElementById('price').value; var result = document.getElementById('result'); var myResult = myBox1 * myBox2; result.value = myResult; }</script><?php$sql = "SELECT item_price.item_id, item_price.ITEM_NAME, suggested_qty, Price_item FROM item_price JOIN suggested_item ON item_price.ITEM_NAME = suggested_item.ITEM_NAME;";$result = $conn->query($sql);?>此外，我想向您介绍用于字符串表示的复杂的卷曲语法 {}方法。出于代码可读性的考虑，通常可以更容易地在花括号之间引用变量，如下所示：注意：仅适用于双引号之间。while ($row = $result->fetch_assoc()) { echo "<tr>"; echo "<td>{$row['item_id']}</td>"; echo "<td>{$row['ITEM_NAME']}</td>"; echo "<td>{$row['suggested_qty']}</td>"; echo "<td>{$row['Price_item']}</td>"; echo "<td><input type='text' name='editedvalues[]' value='{$row['suggested_qty']}' oninput='Multiply()' /></td>"; echo "<td><input name='result' /></td>"; echo "</tr>";}在回顾了您要做什么之后，我首先建议，混合两种语言不被视为一种好习惯。不过，让它滚动吧。您还没有解决一件事。您正在使用静态ID引用，但是（可能）输出许多行。不幸的是，您最终将针对相同的输入而不是我想尝试定位的行运行javascript。您将需要使它们成为动态引用，或者只是简单地对其进行唯一命名。这是您如何解决此问题的示例：<?php# the SQL query$sql = "SELECT item_price.[item_id] as itmId, item_price.[ITEM_NAME] as itmName, [suggested_qty] as itmQty, [Price_item] as itmPrice FROM item_price JOIN suggested_item ON item_price.ITEM_NAME = suggested_item.ITEM_NAME;";# execute the query$query = $conn->query($sql);$items = $query->result();?><script type="text/javascript"> function Multiply(itemId) { var itemQty = document.getElementById('itemQty'+itemId).value; var itemPrice = parseInt(document.getElementById('itemPrice'+itemId).innerText); var cost = itemQty * itemPrice; document.getElementById('itemCost'+itemId).innerText = cost; }</script><form action="#" method="post"> <table> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> <th>Suggested Quantity</th> <th>Order Quantity</th> <th>Total Cost ($)</th> </tr> </thead> <tbody> <?php foreach ($items as $item): ?> <tr> <td><?php echo $item->itmId; # item id ?></td> <td><?php echo $item->itmName; # item name ?></td> <td id="itemPrice<?php echo $item->itmId; ?>"><?php echo $item->itmPrice; # item price ?></td> <td><?php echo $item->itmQty; # suggested qty ?></td> <td><input type="text" id="itemQty<?php echo $item->itmId; ?>" value="<?php echo $item->itmQty; ?>" oninput="Multiply('<?php echo $item->itmId; ?>')"></td> <td id="itemCost<?php echo $item->itmId; ?>"></td> </tr> <?php endforeach; ?> </tbody> </table></form>更新：当然，您可以使用如下的卷曲语法：<tbody> <?php foreach ($items as $item) { echo "<tr> <td>{$item->itmId}</td> <td>{$item->itmName}</td> <td id='itemPrice{$item->itmId}'>{$item->itmPrice}</td> <td>{$item->itmQty}</td> <td><input type='text' id='itemQty{$item->itmId}' value='{$item->itmQty}' oninput='Multiply(\"{$item->itmId}\")'></td> <td id='itemCost{$item->itmId}'></td> </tr>"; } ?></tbody> -
收到一只叮咚
您正在通过其ID调用输入，但是在您的表单中，您仅指示名称。另一件事是，您将函数设置为接收在计算中从未提及的变量/参数（f）。试试这个修复<script type="text/javascript"> function Multiply(){ var myBox1 = document.getElementById('editedvalues[]').value; var myBox2 = document.getElementById('price').value; var result = document.getElementById('result'); var myResult = myBox1 * myBox2; result.value = myResult; } } </script>$sql = "SELECT item_price.item_id, item_price.ITEM_NAME,suggested_qty,Price_itemFROM item_price JOIN suggested_item ON item_price.ITEM_NAME = suggested_item.ITEM_NAME";$result = $conn->query($sql);?><form action="#" method="post"><tr><th> ID</th><th>Item Name</th><th>Suggested Quantity</th><th>Order Quantity</th><th>Total Cost ($)</th></tr><?phpwhile ($row = $result->fetch_assoc()) { echo "<tr>"; echo "<td>" . $row['item_id'] ."</td>"; echo "<td>" . $row['ITEM_NAME'] . "</td>"; echo "<td>" . $row['suggested_qty'] . "</td>"; echo "<td><input type='text' id='price' value=" . $row['Price_item'] . "/></td>"; ?> <td><input type='text' id='editedvalues[]' value="<?php echo $row['suggested_qty']; ?>" oninput="Multiply()"/></td> <?php echo "<td><input type='text' id='result'/></td>"; echo "</tr>";} ?></table> </form>
没找到需要的内容？换个关键词再搜索试试
向你推荐
为什么给el加侦听呢
computed不是计算属性吗？watch才是侦听器啊？为什么不用 watch
监听器类中属性存在问题
php在搭建中
随时随地看视频慕课网APP
PHP