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

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

php html sql

如何显示在php中订购的特定项目的总数,php,html,sql,Php,Html,Sql,我正在创建一个食物菜单来练习PHP和SQL数据库。在我的数据库中，我有食物的名称和价格。在我的表格中，我有一个数字输入框，要求用户输入他们想要的食物数量。我想做的是，如果我只点了一份比萨饼和一份薯条，我如何在用户点击提交按钮后显示总数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ

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

<!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>

注意-在下一行中，我从数量输入中删除了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">');

printf（“%s%s%s”、$row[“productname”]、$row[“price”]、”）；

表单标记应该有一个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;


函数doCalculation（）{
var itemsOrdered=''，total=0，grandTotal=0，priceNumber；
//循环通过产品tr
var prods=document.getElementsByClassname（'product'）；
prods.forEach（prod=>{
//在这里，prod是tr元素，所以当我们使用它来查找类名时，它只会在tr标记内搜索
var productName=prod.getElementsByClassName（“productName”）[0]；
var price=prod.getElementsByClassName（“价格”）[0]；
var quantity=parseInt（prod.getElementsByClassName（“数量”）[0].value）；
如果（数量>0）{
//我们有一个数量，所以把这个添加到列表中
priceNumber=Number（price.replace（//[^0-9.-]+/g，”）；//删除$，并确保它是一个数字
总计=数量*价格编号；
总计+=总计
itemsOrdered+='您订购了'+quantity+'+productName+'（s），总金额为$'+total+'；
}
});
document.getElementById（'itemsOrdered'）。innerHtml=itemsOrdered；

}

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

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