表单 post 请求未返回必要信息

Question

我正在尝试从该表单中提取信息，但我只能使用 TIME 输入框和 Count 输入框来做到这一点。我需要 ROOM 和 SESSION，但是当我发送 post 请求时，我只从 TIME 和 COUNT 获取信息。我认为这与它们是“选项”和“输入”有关，但我不确定。

<form class="form-container"  method="POST">

            <div class="form-group">
                <label>Room</label>
                <select class="form-select" required aria-label="select example">
                {{#each room}}
                <option class="rooms" name="room">{{this.room}}</option>
                {{/each}}
                </select>
                <label>Session</label>
                <select class="form-select" required aria-label="select example">
                {{#each room}}
                    <option class="rooms" name="sessions">{{this.session_name}}</option>
                {{/each}}
                </select>
            </div>

            <div class="form-group">
                <label for="exampleInputPassword1">Time</label>
                <input type="time" name="count_time" class="form-control" id="exampleInputPassword1">
            </div>

            <div class="form-group">
                <label for="exampleInputPassword1">Count</label>
                <input type="number" name="room_counts" class="form-control" id="exampleInputPassword1" placeholder="Count">
            </div>

            <div class="button-container">
                  <button type="submit" class="btn btn-primary">Submit</button>
            </div>       
          
        </form>

这是我用于后端的代码

app.post('/count', (req,res)=>{

    console.log(req.body);

    res.redirect('/count');

});

当我点击提交时，这就是我得到的 {count_time: '', room_counts:''}。如果你能帮助我弄清楚发生了什么以及如何修复它，我将不胜感激。

Answer 1

在表单中，select 字段没有名称，这就是您在服务器中没有完整对象的原因。规则是：

在<select>标签中，需要添加name属性
在<option>标签中，需要添加value属性

这是我的工作代码（出于测试目的我简化了代码）：

<html>

<head>

</head>

<body>
    <form class="form-container" method="POST" action="/count">

        <div class="form-group">
            <label>Room</label>
<!-- add "name" property in select -->
            <select name="room" class="form-select" required
                aria-label="select example">

<!-- add "value" property in option -->
                <option class="rooms" value="A">A</option>
                <option class="rooms" value="B">B</option>
            </select>
            <label>Session</label>
            <select name="sessions" class="form-select" required
                aria-label="select example">
                <option class="rooms" value="C">C</option>
                <option class="rooms" value="D">D</option>
            </select>
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">Time</label>
            <input type="time" name="count_time" class="form-control"
                id="exampleInputPassword1">
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">Count</label>
            <input type="number" name="room_counts" class="form-control"
                id="exampleInputPassword1" placeholder="Count">
        </div>

        <div class="button-container">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>

    </form>
</body>

</html>

在服务器中，我有这样的完整对象：{ room: 'A', sessions: 'C', count_time: '22:01', room_counts: '1' }

表单 post 请求未返回必要信息

Form post request is not returning necessary information

html

node.js

express

handlebars.js