How to submit multiple forms on one route using handlebars - html

Question

I'm having trouble with posting information on two forms using handlebars. I just started learning it so I'm not to comfortable with it yet. Basically Im trying to display information from two tables in my database onto two forms by searching for the project id and returning that information. I have it working for the first form. Whenever I search the project ID, the relevant information is returned. But when I search for the project ID on the next form, it populates data on the first form and completely ignores the second form. Ill post all the code I think is relevant to this question.
This is the controller and the route that handles the first form
findOne: async (req, res) => {
const { project_id } = req.body
const metadata = await Prjt_metadata.findOne({
where: {
project_id
}
});
return res.render('allForms', {
metadata
})
}
}
router.post('/find', metadataController.findOne)
This is the controller and the route that handles the second form
getOneCostsHours: async (req, res) => {
try {
const { project_id } = req.body
const costsHours = await Prjt_costs_hours.findOne({
where: {
project_id
}
});
return res.render('allForms', {
costsHours
})
} catch (error) {
console.error(error.message);
return res.status(500).json(error);
}
}
router.post('/find', costsHoursController.getOneCostsHours);
This is the html code for the first form
<form action='/find' method='POST'>
<section class="row">
<div class="col-md-4">
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Project ID:</span>
</div>
<input id="disabled" name="project_id" type="text" class="form-control">
</div>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Building:</label>
<select disabled name="building" class="form-select" id="inputGroupSelect01">
{{#with metadata}}
<option selected>{{building}}</option>
{{/with}}
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Measure Type:</label>
<select disabled name="measure_type" class="form-select" id="inputGroupSelect01">
{{#with metadata}}
<option selected>{{measure_type}}</option>
{{/with}}
</select>
</div>
<div class="text-end">
<button id="search" type="submit" style="background-color: #bf5700;"
class="btn text-light btn-warning mt-3">Search</button>
</div>
</form>
This is the html code for the second form
<form action='/find' method="POST">
<div class="card border-secondary text-light mb-3" style="background-color: #333f48;">
<h5 class="card-header">Costs & Hours</h5>
<div class="card-body">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Project ID:</span>
<input name="project_id" type="text" class="form-control"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Implementation or
Annual:</label>
<select disabled name="imp_or_ann" class="form-select" id="inputGroupSelect01">
{{#with costsHours}}
<option>{{imp_or_ann}}</option>
{{/with}}
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Category:</label>
<select disabled name="category" class="form-select" id="inputGroupSelect01">
{{#with costsHours}}
<option>{{category}}</option>
{{/with}}
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Costs: $</span>
{{#with costsHours}}
<input disabled value={{cost}} name="cost" type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default">
{{/with}}
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Hours:</span>
{{#with costsHours}}
<input disabled value={{hours}} name="hours" type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default">
{{/with}}
</div>
</div>
<button type="submit" style="background-color: #bf5700;"
class="btn btn-warning text-light">Search</button>
</div>
</form>
The value for project_id comes from the input with name "project_id" on both forms. Like I said above, the first form works fine. It gets the relevant info based on the project_id. But When I search on the second form, it gets ignored and the data from the first form gets posted again.
Hopefully my question makes sense. I can explain it better if anyone needs me to.
Thanks for any help in advance! I'm hoping to learn more about handlebars in the future

Answer 1

I figured it out by just combining the two controllers into a separate controller and route
New controller and route
const { Prjt_metadata, Prjt_costs_hours } = require('../models');
module.exports = {
findOne: async (req, res) => {
try {
const { project_id } = req.body
const metadata = await Prjt_metadata.findOne({
where: {
project_id
}
});
const costsHours = await Prjt_costs_hours.findOne({
where: {
project_id
}
});
return res.render('allForms', {
metadata,
costsHours,
})
} catch (error) {
console.error(error.message);
return res.status(500).json(error);
}
}
}
const router = require('express').Router();
const getOneByIdController = require('../controllers/getDataById');
router.post('/find', getOneByIdController.findOne)
module.exports = router