Map Bootstrap modal button to Flask WTF submit

Question

I have rendered a form in my Flask web app. For my specific use case, I would like to add a modal dialog window to "confirm" the user's choice. I can get the modal to display, but I can't figure out how to map the "confirm" button (in the modal) to the form action. The examples on the bootstrap docs do not include button mapping in the examples.

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
<unrelated content>
...
</unrelated content>
...
<h4>Enter the email address of the employee receiving the unit</h4>
<div class="col-lg-3">
    <div class="row">
        <form class="form" id="emailForm" action="{{  url_for('main.transfer', serial=system.serial)  }}" method="POST">
            {{  mail_form.hidden_tag()  }}
            {{  mail_form.email  }}
            {{  mail_form.submit  }}<!-- ###THIS IS WHAT I WANT THE MODAL CONFIRM TO TRIGGER -->
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Transfer
            </button>
        </form>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Unit Transfer</h5>
        <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>-->
      </div>
      <div class="modal-body">
        You are transferring a unit from {{  system.assignee.email  }} to another user. Are you sure? 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success success" type="submit" data-target="#emailForm.submit()">Confirm</button>
      </div>
    </div>
  </div>
</div>

How do I tell the modal what I want to happen when the Submit button is clicked? All the documentation I can find talks about putting the entire form inside the modal, and that's not what I want.

Thanks in advance.

Answer 1

Make the following changes,

• Change {{ mail_form.submit }} to {{ mail_form.submit(hidden='true', id='form-submit') }} to make the submit button hidden.
• Change <button type="button" class="btn btn-success success" type="submit" data-target="#emailForm.submit()">Confirm</button> to <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>

• Add the below script after adding the jquery ,

  <script>

  $('#modal-confirm').click(function(){
      // Perform the action after modal confirm button is clicked.
  
      $('#form-submit').click(); // submitting the form
  });
  

  </script>

I hope this helps.