Question

我试图在我的表中创建一个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>

Answer 1

您通过其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_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><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>

Answer 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_item
FROM 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);
?>

此外，我想向您介绍complex curly syntax {}字符串表示方法。出于代码可读性的考虑，通常可以更容易地在花括号之间引用变量，如下所示： 注意：仅在双引号之间起作用。

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>

在PHP中创建onchange / oninput侦听器

2 个答案: