javascript - 如何构造，多个单页表单并在nodejs中处理它们

Question

我有一个在循环中使用 express-handlebars 的 html 表单，该表单会根据分配给一个组的用户数量呈现一定次数。因此，如果有 5 个用户，“#Each”之间的以下代码将加载 5 次。

我该如何构建它，以便我可以将它发布回 Node 并根据我用于 id 和名称的内容将其写入 mongoDB。

我找不到任何相关的东西，如果这里有任何东西，请链接它:)

<form action="/users/rsvp" method="POST">
                {{#each docs}}
                <div class="card border-secondary mb-3">
                    <div class="card-header"></div>
                    <div class="card-body">
                        <h4 class="card-title">{{this.name}}</h4>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="1" id="{{this._id}}"
                                name="{{this._id}}">
                            <label class="form-check-label" for="{{this.id}}">
                                Attenting
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="0" id="{{this._id}}"
                                name="{{this._id}}">
                            <label class="form-check-label" for="{{this._id}}">
                                Not Attenting
                            </label>
                        </div>
                        <div class="form-group">
                            <label for="DietaryRequirements"></label>
                            <input type="text" id="DietaryRequirements" name="DietaryRequirements" class="form-control"
                                placeholder="Dietary Requirements" />
                        </div>
                    </div>
                </div>
                {{/each}}

                <button type="submit" class="btn btn-primary btn-block">
                    RSVP
                </button>

            </form>

Answer 1

使用您的代码，所有用户的表单都在 1 <form> 内呈现，这将导致 DietaryRequirements 上有很多重复的字段，当然服务器无法确定哪个字段是给哪个用户的。您可以简单地将它分解，以便每个用户都有一个单独的 ，并通过隐藏的输入传递用户的 ID。例如:

{{#each docs}}
<form action="/users/rsvp" method="POST">
    <!-- Your Form Content, name=attending and name=dietaryRequirements -->

    <input type="hidden" value="{{this._id}}">
    <button type="submit" class="btn btn-primary btn-block">
        RSVP
    </button>

</form>
{{/each}}

或

如果您确实需要为整个用户组使用一个表单，您可以使用 extended body 解析器上的设置，它允许通过 HTML 提交嵌套对象，在这种情况下，您可以编写类似于:

<form action="/users/rsvp" method="POST">
    {{#each docs}}
    <div class="card border-secondary mb-3">
        <div class="card-header"></div>
        <div class="card-body">
            <h4 class="card-title">{{this.name}}</h4>
            <div class="form-check">
                <input class="form-check-input" type="radio" value="1" id="user-{{this._id}}-attending"
                    name="user[{{this._id}}][attending]">
                <label class="form-check-label" for="user-{{this._id}}-attending">
                    Attenting
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" value="0" id="user-{{this._id}}-not-attending"
                    name="user[{{this._id}}][attending]">
                <label class="form-check-label" for="user-{{this._id}}-not-attending">
                    Not Attenting
                </label>
            </div>
            <div class="form-group">
                <label for="user-{{this._id}}-dietary"></label>
                <input type="text" id="user-{{this._id}}-dietary" name="user[{{this._id}}][dietaryRequirements]" class="form-control"
                    placeholder="Dietary Requirements" />
            </div>
        </div>
    </div>
    {{/each}}

    <button type="submit" class="btn btn-primary btn-block">
        RSVP
    </button>

</form>

注意 name s 有 a[b][c] 的符号，还有 id和 for每个页面上都应该有唯一的配对，这些配对也已修复。

如果你将 body parser extended 设置为 true，你应该获取 req.body:

{
    user: {
        '10': {
            attending: '1',
            dietaryRequirements: 'Meaty'
        },
        '11': {
            attending: '0',
            dietaryRequirements: 'N/A'
        }
    }
}