title: Submit form data in modal and move to next modal flask bootstrap
body: <p>I have multiple bootstrap modals, and each modal has a form on it. When I click the next button (&quot;weiter&quot;), i also trigger the submit button on the form and collect this data on the server side. I then want to trigger the next modal to show. I can move between modals without clicking the form submit button, however when I use the form=&quot;form_1&quot; attribute with my next button the modal closes and I am rerouted to the home page. I can't work out how to submit each modal form in turn without the modal closing whenever I submit. Here is the modal containing the first form:</p>
  <pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;Modal_1_Toggle&quot; aria-hidden=&quot;true&quot; aria-labelledby=&quot;Modal_1_ToggleLabel&quot; tabindex=&quot;-1&quot;&gt;
                      &lt;div class=&quot;modal-dialog modal-dialog-centered&quot;&gt;
                        &lt;div class=&quot;modal-content&quot;&gt;
                          &lt;div class=&quot;modal-header&quot;&gt;
                            &lt;h5 class=&quot;modal-title&quot; id=&quot;Modal_1_ToggleLabel&quot;&gt;Stufe 1&lt;/h5&gt;
                            &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-body&quot;&gt;
                              &lt;form method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot;, id=&quot;form_1&quot;&gt;
                                  {{ form_1.csrf_token }}
                                  &lt;p&gt;
                                      {{ form_1.optimise_option.label(class=&quot;form-label&quot;) }}
                                      {{ form_1.optimise_option(class=&quot;form-select form-select-sm&quot;) }}
                                  &lt;/p&gt;
                                  {{ form_1.submit(class=&quot;btn btn-primary&quot;, id=&quot;form_1_submit&quot;) }}
                                  &lt;p id=&quot;test&quot;&gt;This is some random text&lt;/p&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-footer&quot;&gt;
                            &lt;button class=&quot;btn btn-primary&quot; data-bs-target=&quot;#Modal_2_Toggle&quot; data-bs-toggle=&quot;modal&quot; data-bs-dismiss=&quot;modal&quot; id=&quot;modal_1_confirm&quot; form=&quot;form_1&quot;&gt;Weiter&lt;/button&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  </code></pre>
  <p>The <code>data-bs-target='#Modal_2_Toggle'</code> is my next modal containing the second form, which I want to move to after submitting the first form.</p>
  <p>In case needed here is my homepage route and form class (the route is incomplete since I am testing) :</p>
  <pre><code>class Form1(FlaskForm):
  
      optimise_option_choices = [
          'Möglichst viel Rendite erzielen -&gt; Wirtschaftlichkeit', 
          'Möglichst viel Strom vom eigenen Dach -&gt; Unabhängigkeit',
      ]
  
      optimise_option = SelectField(
          label='Worauf möchten Sie Ihre Anlage optimieren?', 
          choices=optimise_option_choices, 
          validators=[DataRequired()]
      )
  
      submit = SubmitField(
          label='SUBMIT'
      )
  
  app.route(&quot;/&quot;, methods=([&quot;POST&quot;, &quot;GET&quot;]))
  def index_2(
      form_1=None,
      form_2=None
      ):
      if form_1 is None:
          form_1 = Form1()
      if form_2 is None:
          form_2 = Form2()
      return render_template(&quot;index_2.html&quot;, form_1=form_1, form_2=form_2)
  </code></pre>