在PHP中创建onchange / oninput侦听器

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_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>" . $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

我猜想您会收到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);

?>

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

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>

Answer 2

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