Search code examples
pythonhtmlflaskbootstrap-4bootstrap-tags-input

bootstrap tags input tag value is not submitting with form

Can someone explain what is going on here? I don't understand why the values that I submit in the tag input field are not being submitted with the form. I've tried this with both examples and neither will send the values correctly.

I am using bootstrap4-tagsinput

HTML CODE:

     <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>

Server

@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

Example form and response:

enter image description here

response:

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

  • In the documentation of the link you provided informs that this puglin was designed for Bootstrap 2.3.2 and 3. By the tag of your question, I saw that you are using 4.

    And others people having issues using it on Bootstrap 4.

    I uploaded a small example based on your form and method for Github, but using version 3 of Bootstrap and it worked as expected.

    enter image description here

    enter image description here

    An alternative could be this. They fix the compatibility problem with bootstrap 4 based on the plugin you used initially

    EDIT:

    After your answer's update using Nodws/bootstrap4-tagsinput I made a small test using this plugin and I was able to reproduce the problem.

    When analyzing the request.form sent, I noticed that with this version of the plugin the key tags are coming in duplicate.

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

    Because of that you dont get any value when your route parser the form to dict.

    I replicate your code with this another version of plugin and now is working as expected.

    enter image description here

    The complete example continues on my Github.