在PHP中创建onchange / oninput侦听器

问题描述 投票：4回答：2

我正在尝试在我的表中创建一个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>
javascript php html onchange
2个回答
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>
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);
?>

此外，我想向您介绍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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.