'How to pass bootstrap modal input data from HTML to Python Flask

I have a modal popup that allows users to input data. I want to pass that data to Flask so that I can put it in my database. For some reason, no data is being passed. I am printing out request.form and it logs "ImmutableMultiDict([])", when it should contain my form's inputs. I have been trying to use POST, but I'm open to other ideas. This is happening on Heroku, I haven't tested it locally.

HTML

<!-- Modal -->
<div class="modal fade" id="newProjectModal" tabindex="-1" aria-labelledby="newProjectModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newProjectModalLabel">Create Project</h5>
        <button type="button" class="btn-close" aria-label="Close"></button>
      </div>
      <form action="/createproject/" name="createProjectForm" id="createProjectForm" method="POST">
        <div class="modal-body">
            <div class="mb-3">
              <label for="projectNameInput" class="form-label">Project Name</label>
              <input type="text" class="form-control" id="projectNameInput" name="projectName" placeholder="New Project">
            </div>
            <div class="mb-3">
              <label for="projectDescriptionInput" class="form-label">Project Description</label>
              <textarea class="form-control" id="projectDescriptionInput" name="projectDescription" rows="3"></textarea>
            </div>
              <label for="selectUsersInput" class="form-label">Assign Personnel</label>
              <select class="form-select" id="selectUsersInput" name="selectUsers" multiple aria-label="multiple select example">
                  {% for user in users %}
                    <option value="{{ user }}">{{ user }}</option>
                  {% endfor %}
              </select>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary">Close</button>
            <button class="btn btn-primary" type="submit" name="submit" value="Submit">Create Project</button>

          </div>
        </tr>
      </form>
    </div>
  </div>
</div>

Python

@app.route('/createproject/', methods=['POST'])
def createproject():
    if request.method == 'POST':
        print(request.form)
        project_name = request.form.get('projectName')
        project_description = request.form.get('projectDescription')
        return '''
                      <h1>The name value is: {}</h1>
                      <h1>The description value is: {}</h1>'''.format(project_name, project_description)

project_name and project_description are always "None" instead of the entered value



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source