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

modal

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