将 Bootstrap 模态按钮映射到 Flask WTF 提交

Question

我在 Flask Web 应用程序中呈现了一个表单。对于我的特定用例，我想添加一个模态对话框窗口来“确认”用户的选择。我可以显示模态，但我不知道如何将“确认”按钮（在模态中）映射到表单操作。bootstrap 文档中的示例不包括示例中的按钮映射。

{% 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>

当单击提交按钮时，我如何告诉模态我想要发生什么？我能找到的所有文档都在谈论将整个表单放在模态中，这不是我想要的。

提前致谢。

Answer 1

进行以下更改，

• 更改{{ mail_form.submit }}为{{ mail_form.submit(hidden='true', id='form-submit') }}隐藏提交按钮。
• 更改<button type="button" class="btn btn-success success" type="submit" data-target="#emailForm.submit()">Confirm</button>为<button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>

• 添加 jquery 后添加以下脚本，

  <script>

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

  </script>

我希望这有帮助。