bootstrap 标签输入标签值未随表单提交

Question

谁能解释一下这是怎么回事？我不明白为什么我在标签输入字段中提交的值没有随表单一起提交。我已经用 both examples 试过了并且都不会正确发送值。

HTML 代码：

     <form class="needs-validation" action="/archive" enctype="multipart/form-data" method="POST">
         <div class="form-group">
            <label>Solution Name</label>
            <input name="solution_name" type="text" class="form-control" required>
            <label>Vendor Name</label>
            <input name="vendor_name" type="text" class="form-control" required>
         </div>
         <div class="form-group">
            <label>Attachment</label>
            <input name="file" type="file" class="form-control-file" required>
         </div>
         <div class="form-group">
            <label>Tags</label>
             <input class="form-select" name="tags" data-role="tagsinput">
          </input>
         </div>

         <button type="submit" value="upload" class="btn btn-primary">Submit</button>
      </form>

服务器

@review_archive_host.route('/archive', methods=["GET", "POST"])
@login_required
def archives():
    if "review_archive" not in session['u']['flags']:
        flash("You do not have permissions to access that feature/page")
        return redirect(get_redirect_url())
    #archive search page
    if request.method == "POST":
        #create a new archive record
        d = request.form.to_dict(flat=True) or {}
        return d

示例表单和响应：

回复：

{
  "solution_name": "asdfs", 
  "tags": "", 
  "vendor_name": "asfsd"
}

Answer 1

在您提供的 link 的文档中，告知此 puglin 是为 Bootstrap 2.3.2 和 3 设计的。通过你的问题标签，我看到你使用的是 4.

其他人 having issues 在 Bootstrap 上使用它 4.

我根据您的 Github 表单和方法上传了一个小示例，但使用 Bootstrap 的 3 版本并且它按预期工作。

另一个选择是 this。他们修复了 bootstrap 4 基于你最初使用的插件

的兼容性问题

EDIT:

在使用 Nodws/bootstrap4-tagsinput 更新您的答案后，我使用此插件进行了一次小测试，并且能够重现该问题。

在分析发送的 request.form 时，我注意到使用此版本的插件，密钥 tags 是重复的。

ImmutableMultiDict([('vendor_name', u'vendor'), ('solution_name', u'solution'), ('tags', u''), ('tags', u'tag1,tag2')])

因此，当您的路由解析器将表单转为字典时，您不会获得任何值。

我用 this 另一个版本的插件复制了您的代码，现在可以正常工作了。

完整示例在我的 Github 上继续。

Answer 2

文档中的插件适用于 bootstrap 2.3.2 或 3，不适用于 bootstrap 4。

为了使用该插件，您可以将 bootstrap 降级到版本 3。

另一种选择是 Bootstrap 4 标签输入插件 jQuery - https://www.jqueryscript.net/form/Bootstrap-4-Tag-Input-Plugin-jQuery.html

bootstrap 标签输入标签值未随表单提交

bootstrap tags input tag value is not submitting with form

html

python

flask

bootstrap-tags-input

bootstrap-4