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函数来引用元素，但是除了可以在该函数上运行多个输入的事实之外，您的输入甚至没有ID。

为确保此功能可在相关输入上使用，您需要查看事件的目标，而不是忽略它。同样，您应该使用适当的事件绑定，而不要使用内联oninput属性。

您还没有使用table元素，对于大量HTML代码，您应该真正摆脱PHP。

使用类似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>

如何使php表中的javascript函数正常工作？

1 个答案: