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