代码之家 › 专栏 › 技术社区 › Mark Edmondson

将引导模式按钮映射到Flask WTF submit

flask-wtforms bootstrap-modal bootstrap-4 flask

Mark Edmondson · 技术社区 · 7 年前

我在Flask web app中呈现了一个表单。对于我的特定用例,我想添加一个模式对话框窗口来“确认”用户的选择。我可以得到要显示的模式,但我不知道如何将“确认”按钮(在模式中)映射到表单操作。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>

单击Submit按钮时,如何告诉modal我希望发生什么?我能找到的所有文档都在谈论如何将整个表单放在modal中,这不是我想要的。

提前谢谢。

1 回复 | 直到 7 年前

George J Padayatti 7 年前

进行以下更改,

改变 {{ 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>

我希望这有帮助。