插入自定义 HTML 字段值并在 PHP 中访问它

Question

我正在尝试插入用于计算需要存储在数据库中的总价格的 javascript，但在我提交表单后，该字段在数据库中为空白。我需要将总成本显示在网站上并插入到数据库中。我试图把两种形式的价格。一种是显示javascript。另一种是将结果插入到数据库中。我想我应该编辑 HTML 代码来解决这个问题，但我不知道如何。请帮忙这是 HTML 代码：Price: <span id="totalCost"></span><input type="hidden" name="totalCost">这是一些Javascript：var totalCostEl = document.querySelector('#totalCost');function calculateTotal() {  var unitCost = product_price[productEl.value];  var additionalCost = size_price[sizeEl.value] || 0;  var qty = quantityEl.value || 0;  totalCostEl.textContent = `Total cost: $${(unitCost + additionalCost) * qty}`;}这是php：if (!$con){die("Failed to connect to MySQL: " . mysqli_connect_error()); }else{ echo "Order Succeed!" ;}$var_Price = $_POST["totalCost"];$sql="INSERT INTO label (product, quantity, size, base, scents, ingredients, packaging, name, email, phone, message, totalCost)VALUES('$var_Product','$var_Quantity','$var_Size','$var_Base','$var_Scent','$var_Ingredients','$var_Packaging','$var_Name','$var_Email','$var_Phone','$var_Message','$var_Price')";这是数据库：+----+------------+------------------------+------------+---------+-----------+----------+-------------------+---------------+------------+------------------------+----------------+-----------+| id | name       | email                  | phone      | message | product   | quantity | size              | base          | scents     | ingredients            | packaging      | totalCost |+----+------------+------------------------+------------+---------+-----------+----------+-------------------+---------------+------------+------------------------+----------------+-----------+| 22 | xxx        | xxx                    | xxx        |   None  | Face Soap |        1 | Regular Size(3oz) | Dry Skin      | Clove      | Shea Butter            | Co-Brand Label | 0         |我可以在网站上显示总成本，但我无法将总成本插入到数据库中。标签表中的所有其他内容都已成功插入到数据库中。如何将 totalCost javascript 插入到数据库中。

Answer 1

向我们展示整个<form>代码会很有帮助，但对我来说，问题似乎在于您没有在隐藏输入字段中设置总价的值。

在您的 JS 中，您通过分配总价来显示总价，totalCostEl.textContent但totalCostEl仅指不随表单一起发送的 span 元素。您需要做的是选择隐藏的输入元素并将总价格值也放入其中，以便将其发送到服务器。也可能更容易为该隐藏字段提供一个 id，例如id="totalPriceInput"这样您就可以在您的 JS 中轻松引用它。

所以，

<input type="hidden" name="totalCost">

需要是

<input type="hidden" name="totalCost" id="totalPriceInput">

在你的 jS 中，你可以做类似的事情

document.getElementById('totalPriceInput').value = "the calculated total price here"

提交表单时，只有从用户那里获取输入的某些元素才会被发送到服务器。