Currently, I am in the process of developing a website that utilizes Express and routing to manage HTTP requests.
As part of this project, I am dynamically populating my HTML div elements using Handlebars:
<div class="popup center" style="height: 15em;">
<h3 name="name" id="name">{{ active_name }}</h3>
<p name="description" id='description'>{{ active_desc }}</p>
</div>
Users are able to modify these elements using the contenteditable="true" attribute.
My goal is to create a button that, when clicked, will call a route and pass all the fields that have been modified.
Currently, I have only been able to pass one element ({{session.recipe}} which represents the recipe's ID), but I also want to handle the modified name and description fields.
<a href="/save-recipe/{{session.recipe}}" style="color: black;">
<button name="button" class="greyishBackground width45 right">
<p>Save</p>
</button>
</a>
In my index.js file, I have the following code snippet:
router.get('/save-recipe/:id/', function(req, res, next) {
var recipe_id = req.params.id;
console.log(req.body.name); // does not work - returns undefined
}
Since the code snippet req.body.name is not working (returning undefined), I am exploring ways to pass additional parameters to the route and handle them similarly to how I handled the recipe_id parameter (req.params.id).
Can someone provide guidance on how to achieve this? Is it possible to create an object with name and description fields and pass only the object? How would I go about doing this?
Alternatively, is there a way to make the req.body.name snippet work?