时间戳

首页 > 解决方案 > 具有一行两列的引导表单：仅提交一列表单值

node.js - 具有一行两列的引导表单：仅提交一列表单值

问题描述

在表单 POST 上，只有第一列表单数据被提交。第二列（类别和优先级）未定义。如果我将提交按钮移动到第二列，则会发生完全相反的情况。然后，如果我将表单重新排列为只有一列，则所有表单值都会被提交（临时工作）。我怎样才能用两列实现这个表单并提交整个表单？

控制台日志输出：

from CREATE ISSUE CONTROLLER
req.body.title: New bug report
req.body.description: New bug report
req.body.priority: undefined
req.body.category: undefined

表单代码（.pug）：

#newissue.tab-pane.fade(role="tabpanel" aria-labelledby="newissue-tab")
  .row
    .col-md-6.offset-md-2.new-issue-form
      form(method="POST" action="/newissue")
        .form-group
          label(for="newIssueTitle") Title
          input#newIssueTitle.form-control(type="text" placeholder="Issue title ..." name='title' required='true')
        .form-group
          label(for="newIssueDescription") Description
          textarea#newIssueDescription.form-control(rows="10" placeholder="description" name='description' required='true')
        div
          input#filepond(type="file" name="filepond" data-max-files="10" multiple="")
          button.btn.btn-success(type="submit") Create New Issue
    .col-md-2.new-issue-form.input-group.mb-3
        .form-group.mb-3
          label(for="category") Category
          select#category.form-control(type='select', placeholder='Category ...' name='category' required='true')
            for category in categories
              option(value=category._id) #{category.name}
        .form-group.mb-3
          label(for="priority") Priority
          select#priority.form-control(type='select', placeholder='Priority ...' name='priority' required='true')
            option(selected="") Priority...
                each pri in priorities_list
                    option(value=pri._id) #{pri.name}
                else
                    li No priorites

标签： node.jsexpressbootstrap-4pug

解决方案

Pug 的编写方式，您的第二列都不在form元素内。表单的所有元素都必须在form元素内部才能提交。

尝试移动form元素以包含整个.row:

#newissue.tab-pane.fade(role="tabpanel" aria-labelledby="newissue-tab")
  form(method="POST" action="/newissue")
    .row
      .col-md-6.offset-md-2.new-issue-form
        .form-group
          label(for="newIssueTitle") Title
          input#newIssueTitle.form-control(type="text" placeholder="Issue title ..." name='title' required='true')
        .form-group
          label(for="newIssueDescription") Description
          textarea#newIssueDescription.form-control(rows="10" placeholder="description" name='description' required='true')
        div
          input#filepond(type="file" name="filepond" data-max-files="10" multiple="")
          button.btn.btn-success(type="submit") Create New Issue
      .col-md-2.new-issue-form.input-group.mb-3
        .form-group.mb-3
          label(for="category") Category
          select#category.form-control(type='select', placeholder='Category ...' name='category' required='true')
            for category in categories
              option(value=category._id) #{category.name}
        .form-group.mb-3
          label(for="priority") Priority
          select#priority.form-control(type='select', placeholder='Priority ...' name='priority' required='true')
            option(selected="") Priority...
                each pri in priorities_list
                    option(value=pri._id) #{pri.name}
                else
                    li No priorites

推荐阅读