如何显示在 php 中订购的特定项目的总数答案

【问题标题】：How do I display the total for specific items ordered in php如何显示在 php 中订购的特定项目的总数
【发布时间】：2021-05-03 15:46:27
【问题描述】：

我正在创建一个食物菜单来练习 PHP 和 SQL 数据库。在我的数据库中，我有食物名称和这些食物的价格。在我的表格中，我有一个数字输入框，要求用户输入他们想要的食物数量。我想要做的是，如果我只订购 1 份披萨和一份薯条，我如何在用户点击提交按钮后显示总数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        tr,
        th,
        td {
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <?php
        echo '<form action="">';
        echo"<h1>Food Menu</h1>";
        $conn = mysqli_connect("localhost","root","","FoodMenu") or die("Missing Input. Go back and enter ID or Name");
        $query = "select productname,price from product" ;
        $r= mysqli_query($conn, $query);
        echo"<p></p>";
        echo"<table>";
        echo"<tr><th>product</th><th>price</th><th>Quantity</th></tr>";
        while($row = mysqli_fetch_assoc($r)){
            printf("<tr><td>%s</td><td>%s</td><td>%s</td></tr>", $row["productname"],$row["price"], '<input type="number" id="quantity" name="quantity" value="0" min="0" max="5">');

        }
        echo"</table>";
        echo '<p><input type="submit">';
        echo '</form>';
    ?>
</body>
</html>

这是我的数据库信息

CREATE TABLE product ( 
productname varchar(30) NOT NULL,
 price double NOT NULL, )
INSERT INTO product (productname, price) VALUES 
('Pizza', 3.99), 
('Fries', 1.99), 
('water', 0.99), 
('Cheese Balls', 2.99), 
('Hot Dog', 2.99);

【问题讨论】：

表单应该有一个操作 href 链接，您将在其中进行所有请求的计算，然后打印一个带有结果值的新视图页面。还要向表单添加一个方法/类型属性，如 POST 或 GET。否则，您可以通过 jQuery 使用类似于 $.post / $.get / $.ajax 的东西并完全跳过提交。

标签： php html sql

【解决方案1】：

注意 - 在下一行中，我从数量输入中删除了 id，因为您将拥有许多这样的输入，并且如果它们有 ID - 每个 ID 都应该是唯一的。你现在根本不需要它，所以我删除了它。此外，我们需要添加类之类的东西，以便我们可以在此过程中获取价格和商品名称。这是重写的那一行：

 printf("<tr class='product'><td class='productName'>%s</td><td class='price'>%s</td><td>%s</td></tr>", $row["productname"],$row["price"], '<input type="number" class="quantity" name="quantity" value="0" min="0" max="5">');

你的表单标签应该有一个 onsubmit 方法，它会调用一个javascript函数来计算，然后显示总数。

<form onsubmit='return doCalculation()'>
<!-- when you put a return statement in the onsubmit, we can return 'false' and as a result the form won't submit. For this example, we're not submitting the form, just doing the calculation -->

脚本看起来像这样

<script>
function doCalculation() {

var itemsOrdered='', total = 0, grandTotal =0, priceNumber;
// loop through product tr's 
var prods = document.getElementsByClassname('product');
prods.forEach(prod => {
// in here, prod is the tr element, so when we use it to find a classname it will only search inside that tr tag
var productName = prod.getElementsByClassName("productName")[0];
var price = prod.getElementsByClassName("price")[0];
var quantity = parseInt(prod.getElementsByClassName("quantity")[0].value);

if (quantity > 0) {
// we have a quantity, so add this to the list
priceNumber = Number(price.replace(/[^0-9.-]+/g,"")); // remove the $ and make sure it's a number
total = quantity * priceNumber;
grandTotal += total
  itemsOrdered += '<p>You ordered ' + quantity + ' ' + productName + '(s) for a total of $ ' + total + '</p>';
}
});

document.getElementById('itemsOrdered').innerHtml = itemsOrdered;

}

<div id='itemsOrdered'></div>

【讨论】：