Question

我在Flask网络应用中渲染了一个表单。对于我的具体用例，我想添加一个模态对话框窗口来“确认”用户的选择。我可以获得要显示的模态，但我无法弄清楚如何将“确认”按钮（在模态中）映射到表单操作。 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提交

1 个答案: