Question

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

如何构造该结构，以便可以根据ID和名称的用途将其回发到node并将其写入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}}

OR

如果您确实希望为整个用户组使用一种表单，则可以使用正文解析器上的extended设置，该设置允许通过HTML提交嵌套对象，在这种情况下，您可以编写类似于以下内容的内容：< / p>

<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的符号为a [b] [c]，并且id和for在每一页上也应具有唯一的配对，并且该配对也已修复

如果将body解析器设置为true，则应该获取req.body：

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

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

1 个答案: