So I have my input forms that have a fixed value, so when I fill out my form it will showcase my order value properly. However, this doesn't include my taxes, fees etc. in the order total.
Example input
<input type="checkbox" name="item1" value="10" onClick="updatePrice()">
<label for="item1">12 piece wings $10</label>
The value is $10, so when I add this to my express API function
{
name: req.body.name,
order_value: req.body.item1,
}
It will show in my console.log the order value of $10
However, I wrote this JS function to include delivery fees + taxes etc.
function updatePrice() {
let items = 0;
let deliveryFee = 0;
let tax = document.getElementById('tax')
let tip = document.getElementById('tip')
tax = .07
tip = .2
document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
if (checkBox.checked) {
items += +checkBox.value
if(deliveryFee == 0) {
deliveryFee = 1.99
}
}
})
if (items >= 20) {
deliveryFee = deliveryFee + 3;
}
let orderTotal = (items * tax)+(items * tip)+(items) + deliveryFee;
document.getElementById("price").textContent = `Food Total: $${(items).toFixed(2)}`;
document.getElementById("tax").textContent = `Tax (7%): $${(items * tax).toFixed(2)}`;
document.getElementById("tip").textContent = `Tip (20%): $${(items * tip).toFixed(2)}`;
document.getElementById("fee").textContent = `Delivery Fee: $${(deliveryFee).toFixed(2)}`;
document.getElementById("total").textContent = `Your order total is: $${(orderTotal).toFixed(2)}`;
}
Then in my index.html I have this for my total
<p id="total" name="total">Your order total is: $0.00</p>
So on my browser, it will show on the text the order total ending up being $14.69
However, if I try to add that to my express function
{
name: req.body.name,
order_value: req.body.total,
}
This doesn't work or even do anything because I am guessing it is just a simple p tag and I don't know how to get the total from the JS function to display onto my express API file?
How would I include the additional fees to showcase in my total cost for my API?
You could add a hidden form element <input type="hidden" name="total" id="totalform"> and fill that with an additional Javascript statement document.getElementById("totalform").value = ....
But you must be aware that calculating such things in Javascript on the frontend can only serve a better user experience. The backend must not rely on computations done on the frontend, because these can always be manipulated by a malicious user. See https://stackoverflow.com/a/72130824/16462950.
I would therefore find it OK if you display the total only in a <p> element, do not send it to the backend but rather compute it there again.
Here is a simplified example that does not use Javascript on the client but instead reloads the page after every interaction:
app.use(express.urlencoded({extended: false}), function(req, res, next) {
res.locals.product = req.body.product;
res.locals.quantity = req.body.quantity;
next();
})
.post("/action", async function(req, res, next) {
switch (res.locals.product) {
case "Chalk": res.locals.price = 3 * res.locals.quantity; break;
case "Cheese": res.locals.price = 5 * res.locals.quantity; break;
}
if (req.body.order) {
var {product, quantity, price} = res.locals;
// await write {product, quantity, price} to database;
}
next();
})
.use(function(req, res) {
res.type("html");
res.end(`<!DOCTYPE html>
<html>
<body>
<form action="action" method="post" enctype="application/x-www-form-urlencoded">
Product <input name="product" value="${res.locals.product || ""}"/><br/>
Quantity <input name="quantity" value="${res.locals.quantity || ""}"/><br/>
Price <input name="price" readonly value="${res.locals.price || ""}"/>
<input type="submit" name="calculate" value="Calculate Price"/>
<input type="submit" name="order" value="Order"/>
</form>
</body>
</html>`);
});