'Trigger a flask WTF SubmitField from a bootstrap 5 modal button
I have created a flask form, embedded in a bootstrap 5 modal. The modal looks like this:
When I click "Weiter" I want to be able to both move to the next modal, and validate and collect the data from the form in my flask form. I can't work out how to create this action with the flask WTF SubmitField. Here is my modal:
<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" enctype="multipart/form-data">
{{ form_1.csrf_token }}
<p>
{{ form_1.optimise_option.label(class="form-label") }}
{{ form_1.optimise_option(class="form-select form-select-sm") }}
</p>
{{ form_1.submit(class="btn btn-primary") }} <--- THIS IS WHERE I WANT TO TRIGGER THE NEXT MODAL AND RETURN THE FORM DATA
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal">Weiter</button>
^^THIS IS THE BOOSTRAP BUTTON, IDEALLY THIS WOULD BE MY SUBMITFIELD BUTTON
</div>
</div>
</div>
</div>
I thought I might be able pass the bootstrap css variables from the bootstrap button directly to the SubmitField as arguments like this:
{{ form_1.submit(class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal") }}
But it seems this is not possible. Any help would be really appreciated.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

