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

Question

我在我的 Flask 网络应用程序中呈现了一个表单。对于我的特定用例，我想添加一个模式对话框 window 到 "confirm" 用户的选择。我可以显示模态，但我不知道如何将 "confirm" 按钮（在模态中）映射到表单操作。 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>

希望对您有所帮助。

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

Map Bootstrap modal button to Flask WTF submit

flask

flask-wtforms

bootstrap-modal

bootstrap-4