引导标签输入标签值未与表单一起提交

Posted 2023-03-05

【中文标题】引导标签输入标签值未与表单一起提交

【英文标题】：bootstrap tags input tag value is not submitting with form

【发布时间】：2021-04-16 15:36:05

【问题描述】：

有人可以解释这里发生了什么吗？我不明白为什么我在标签输入字段中提交的值没有与表单一起提交。我用both examples 试过这个 并且两者都不会正确发送值。

我正在使用bootstrap4-tagsinput

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"

【问题讨论】：

我根据这个插件更新了我的答案。

【参考方案1】：

在您提供的链接的文档中，该 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')])

因此，当您的路由将表单解析为 dict 时，您不会获得任何价值。

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

完整的例子继续我的Github。

【讨论】：

重复的名称实际上是我注意到的，我不知道为什么它默认为空白值。

【参考方案2】：

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

为了使用该插件，您可以将引导程序降级到版本 3。

另一种方法是使用 jQuery 的 Bootstrap 4 标签输入插件 - https://www.jqueryscript.net/form/Bootstrap-4-Tag-Input-Plugin-jQuery.html

【讨论】：

这是我正在使用的插件。