html - 如何使用 Handlebars 在一条路线上提交多个表单

Question

我在使用 Handlebars 在两种形式上发布信息时遇到问题。我刚刚开始学习它，所以我还不适应它。基本上，我试图通过搜索项目 ID 并返回该信息，将我数据库中两个表中的信息显示到两个表单上。我让它为第一种形式工作。每当我搜索项目ID时，都会返回相关信息。但是当我在下一个表单上搜索项目 ID 时，它会在第一个表单上填充数据并完全忽略第二个表单。我会发布我认为与这个问题相关的所有代码。
这是处理第一个表单的 Controller 和路由

 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)

这是 Controller 和处理第二种形式的路由

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);

这是第一个表单的 html 代码

    <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>

这是第二种形式的html代码

    <form action='/find' method="POST">
                    <div class="card border-secondary text-light mb-3" style="background-color: #333f48;">
                        <h5 class="card-header">Costs &amp; 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>

project_id 的值来自两个表单上名称为“project_id”的输入。就像我上面说的，第一种形式工作正常。它根据 project_id 获取相关信息。但是当我搜索第二个表单时，它被忽略，第一个表单中的数据再次发布。
希望我的问题是有道理的。如果有人需要我，我可以更好地解释它。
提前感谢您的任何帮助!我希望将来能更多地了解 Handlebars

Answer 1

我通过将两个 Controller 组合成一个单独的 Controller 和路由来解决这个问题
新的 Controller 和路由

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