I want to submit my form data and navigate to an HTML file with the data values showing dynamically.
Here is my code in my app.post function for 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);
So after I submit my input form data, this code will log all my data in the console.
So my console in my terminal will look like this
output
<body>
<h1>Thank you for buying!</h1>
<p>Here are your details</p>
<p>Food Total: $100.00</p>
</body>
My problem is I don't know how to get this console.log() data to show up in my browser?
Here is the order.html File I am trying to get to display after submitting my form
<body>
<h1>Thank you for buying!</h1>
<p>Here are your details</p>
<p>Food Total: {%foodTotal%}</p>
</body>
And here is the app.get in my express file
app.get("/order", (req, res) => {
res.sendFile(path.join(__dirname, "order.html"));
});
If I try to change my res.send() to res.redirect('order') it will only show my HTML normally, but won't include the updated values from my form when I submit it
My Goal is the be able to submit my form and have it showcase my HTML file order.html with the data like this in my browser and not my terminal
<body>
<h1>Thank you for buying!</h1>
<p>Here are your details</p>
<p>Food Total: $100.00</p>
</body>
Is this possible with regular html files? Or would I need to use something like EJS?
My previous solution was the hardcode the HTML in my express.js file, but that doesn't seem proper
Ultimately, you will need some form of templating.
The accepted answer to this question details a hand-rolled templating engine which would be suitable for simple a usecase such as you describe.
As your app becomes more complicated, you might consider adopting a templating engine.