My objective is to successfully submit my form data and then dynamically navigate to an HTML file where the values are displayed. Here's the code snippet from my app.post function in Express:
const results = fs.readFile("order.html", "utf-8", (err, data) => {
let output = data.replace("{%foodTotal%}", response.data.order_value);
console.log("output", output);
});
res.send(results);
Upon submitting the input form data, this code will log all the data in the console.
This is what the console in my terminal will show:
output
<body>
<h1>Thank you for buying!</h1>
<p>Here are your details</p>
<p>Food Total: $100.00</p>
</body>
However, I am struggling to figure out how to display this console.log() data on my browser. My goal is to showcase the contents of 'order.html' after form submission, highlighting the updated values.
Below is a preview of the 'order.html' File I want to display post-form submission:
<body>
<h1>Thank you for buying!</h1>
<p>Here are your details</p>
<p>Food Total: {%foodTotal%}</p>
</body>
In addition, here is the app.get function in my Express file:
app.get("/order", (req, res) => {
res.sendFile(path.join(__dirname, "order.html"));
});
If I attempt to change res.send() to res.redirect('order'), it will only display the HTML normally without the updated form values. How can I achieve displaying the HTML file with the updated values in the browser upon form submission?
My desired outcome is to submit the form data and have the 'order.html' file display in the browser with the data included, similar to the following:
<body>
<h1>Thank you for buying!</h1>
<p>Here are your details</p>
<p>Food Total: $100.00</p>
</body>
Is this achievable with regular HTML files or would I need to utilize something like EJS? Previously, I hardcoded the HTML in my express.js file, but that doesn't seem like the optimal solution.