javascript - 如何让 javascript 函数在 php 表中工作？

Question

我正在尝试让 Multiply 函数运行并将订单数量乘以商品价格。我无法使用 oninput 属性让函数在 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>

<?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);
?>

form action="#" method="post">
<tr>
<th> ID</th>
<th>Item Name</th>
<th>Suggested Quantity</th>
<th>Price</th>
<th>OrderQuanity</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>";
}
?>

Answer 1

您正在使用 document.getElementById 函数来引用元素，但是除了这个函数可以运行的多个输入之外，您的输入甚至没有身份证。

要确保此函数对有问题的输入起作用，您需要查看事件的目标而不是忽略它。同样，您应该使用适当的事件绑定(bind)而不是内联 oninput 属性。

您也没有使用 table 元素，您真的应该摆脱 PHP 来处理大量 HTML 代码。

使用像 jQuery 这样的框架会容易得多，但这应该可行。

var nodes = document.getElementsByClassName("qtyinput");

for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('input', multiply, false);
}

function multiply(e) {
    var qty = e.target.value; 
    var price = e.target.parentNode.parentNode.getElementsByClassName("pricetd")[0].textContent;
    var result = e.target.parentNode.parentNode.getElementsByClassName("resultinput")[0];
    var myResult = qty * price;
    result.value = myResult;
}

<?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);
?>

<form action="#" method="post">
    <table>
    <tr>
        <th> ID</th>
        <th>Item Name</th>
        <th>Suggested Quantity</th>
        <th>Price</th>
        <th>OrderQuanity</th>
        <th>Total Cost</th>
    </tr>

    <!-- test data for snippet -->
    <tr>
        <td>111</td>
        <td>Test item</td>
        <td>4</td>
        <td class="pricetd">40</td>
        <td>
            <input type="text" name="editedvalues[]" class="qtyinput" value="4" />
        </td>
        <td><input name='result' class="resultinput" /></td>
    </tr>

    <?php while ($row = $result->fetch_assoc()) :?>

    <tr>
        <td><?=$row["item_id"]?></td>
        <td><?=$row["ITEM_NAME"]?></td>
        <td><?=$row["suggested_qty"]?></td>
        <td class="pricetd"><?=$row["Price_item"]?></td>
        <td>
            <input type="text" name="editedvalues[]" class="qtyinput" value="<?=$row["suggested_qty"]?>" />
        </td>
        <td><input name='result' class="resultinput" /></td>
    </tr>
    <?php endwhile?>

    </table>
<form>