Así que tengo mis formularios de entrada que tienen un valor fijo, por lo que cuando complete mi formulario mostrará el valor de mi pedido correctamente. Sin embargo, esto no incluye mis impuestos, tarifas, etc. en el total del pedido.
Entrada de ejemplo
<input type="checkbox" name="item1" value="10" onClick="updatePrice()"> <label for="item1">12 piece wings $10</label>El valor es $10, así que cuando agrego esto a mi función de API express
{ name: req.body.name, order_value: req.body.item1, }Se mostrará en mi console.log el valor del pedido de $10
Sin embargo, escribí esta función JS para incluir gastos de envío + impuestos, 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)}`; }Luego en mi index.html tengo esto para mi total
<p id="total" name="total">Your order total is: $0.00</p>Entonces, en mi navegador, mostrará en el texto que el total del pedido termina siendo $ 14.69
Sin embargo, si trato de agregar eso a mi función express
{ name: req.body.name, order_value: req.body.total, }Esto no funciona ni hace nada porque supongo que es solo una etiqueta p simple y no sé cómo obtener el total de la función JS para mostrarlo en mi archivo API express.
¿Cómo incluiría las tarifas adicionales para mostrar en el costo total de mi API?
Puede agregar un elemento de formulario oculto <input type="hidden" name="total" id="totalform"> y llenarlo con una declaración adicional de Javascript document.getElementById("totalform").value = ... .
Pero debe tener en cuenta que calcular tales cosas en Javascript en la interfaz solo puede brindar una mejor experiencia de usuario. El backend no debe depender de los cálculos realizados en el frontend, ya que estos siempre pueden ser manipulados por un usuario malintencionado. Consulte https://stackoverflow.com/a/72130824/16462950 .
Por lo tanto, me parecería bien si muestra el total solo en un elemento <p> , no lo envíe al backend sino que lo calcule allí nuevamente.
Aquí hay un ejemplo simplificado que no usa Javascript en el cliente, sino que recarga la página después de cada interacción:
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>`); });