插入自定义 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"提交表单时，只有从用户那里获取输入的某些元素才会被发送到服务器。