插入自定義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"

提交表單時，只有某些接受用戶輸入的元素才會發送到服務器。