问题:在表单提交功能中使用 Bootstrap 4 模态确认对话框

我有一个表单,其onsubmit验证使用 html confirm() 方法可以正常工作。我想用 Bootstrap 确认模式对话框替换确认方法,但还没有找到一种方法来阻止表单提交,直到用户响应 Bootstrap 模式对话框。我当前的代码基于此示例:https://codepen.io/ajchambeaud/pen/KpVvMV

如何防止表单提交足够长的时间以使用户响应 Bootstrap 模态对话框?

这是定义表单的烧瓶模板的摘录:

{% extends 'base.html' %}

{% block main %}
  <div><br></div>
  <div class="card bg-light">
    <div class="card-body">

      <form name="fabricSpec" onsubmit="return validate();" method="post">

        <p>Select the number of shafts on your loom:
          <select name="shaftCount">
            <option value="8">&nbsp;&nbsp;8</option>
            {% for i in range(12, 100, 4) %}
              {% if i ==  shaft_count %}
                <option value="{{ i }}" selected>&nbsp;{{ i }}</option>
              {% else %}
                <option value="{{ i }}">&nbsp;{{ i }}</option>
              {% endif %}
            {% endfor %}
            {% for i in range(100, 201, 4) %}
              {% if i ==  shaft_count %}
                <option value="{{ i }}" selected>{{ i }}</option>
              {% else %}
                <option value="{{ i }}">{{ i }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </p>

        <p>Select the number of blocks in your design:
          <select name="blockCount">
            {% for i in range(2, 10) %}
              {% if i ==  block_count %}
                <option value="{{ i }}" selected>&nbsp;{{ i }}</option>
              {% else %}
                <option value="{{ i }}">&nbsp;{{ i }}</option>
              {% endif %}
            {% endfor %}
            {% for i in range(10, 51) %}
              {% if i ==  block_count %}
                <option value="{{ i }}" selected>{{ i }}</option>
              {% else %}
                <option value="{{ i }}">{{ i }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </p>

        <div class="col-6">
          <input class="btn btn-secondary" type="submit" id="select_gif_btn"
                 formaction="{{ url_for('selectgif.select_gif_file') }}"
                 value="Read Weaves from GIF">

          <input class="btn btn-primary" type="submit" id="select_weaves_btn"
                 formaction="{{ url_for('weavemap.weave_map') }}"
                 value="Select Weaves">
        </div>
      </form>

    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="warnModal" tabindex="-1" role="dialog" aria-labelledby="warnModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="warnModalLabel">Warning</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button id="modal-btn-yes" type="button" class="btn btn-secondary">Yes</button>
          <button id="modal-btn-no" type="button" class="btn btn-primary">No</button>
        </div>
      </div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
  <script language="javascript">

    // based on https://codepen.io/ajchambeaud/pen/KpVvMV
    var modalConfirm = function (callback) {
      $("#modal-btn-yes").on("click", function (e) {
        callback(true);
        $("#warnModal").modal('hide');
      });

      $("#modal-btn-no").on("click", function (e) {
        callback(false);
        $("#warnModal").modal('hide');
      });
    }

    function showWarnModal(message) {
      $('#warnModal .modal-body').text(message);
      $('#warnModal').modal('show');

      modalConfirm(function (confirm) {
        if (confirm) {
          console.log('confirmed');
          window.document.fabricSpec.submit();
        } else {
          console.log('not confirmed');
        }
      });
    }

    function validate() {
      var form = window.document.fabricSpec;
      var shaftCount = form.shaftCount.value;
      var blockCount = form.blockCount.value;
      var valid = true;
      if (blockCount * 4 > shaftCount) {
        var warning = "You specified more blocks than your loom can weave without using pickup. " +
          "Do you wish to Proceed?"
        valid = confirm(warning);
        {#showWarnModal(warning);#}
        {#valid = false;#}
      }
      console.log('valid:', valid);
      return valid;
    }

  </script>
{% endblock %}

解答

解决方案是在确认模式对话框的回调中设置表单的操作。

{% extends 'base.html' %}

{% block main %}
  <div><br></div>
  <div class="card bg-light">
    <div class="card-body">

      <form name="fabricSpec" method="post">

        <p>Select the number of shafts on your loom:
          <select name="shaftCount">
            <option value="8">&nbsp;&nbsp;8</option>
            {% for i in range(12, 100, 4) %}
              {% if i ==  shaft_count %}
                <option value="{{ i }}" selected>&nbsp;{{ i }}</option>
              {% else %}
                <option value="{{ i }}">&nbsp;{{ i }}</option>
              {% endif %}
            {% endfor %}
            {% for i in range(100, 201, 4) %}
              {% if i ==  shaft_count %}
                <option value="{{ i }}" selected>{{ i }}</option>
              {% else %}
                <option value="{{ i }}">{{ i }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </p>

        <p>Select the number of blocks in your design:
          <select name="blockCount">
            {% for i in range(2, 10) %}
              {% if i ==  block_count %}
                <option value="{{ i }}" selected>&nbsp;{{ i }}</option>
              {% else %}
                <option value="{{ i }}">&nbsp;{{ i }}</option>
              {% endif %}
            {% endfor %}
            {% for i in range(10, 51) %}
              {% if i ==  block_count %}
                <option value="{{ i }}" selected>{{ i }}</option>
              {% else %}
                <option value="{{ i }}">{{ i }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </p>

        <div class="col-6">
          <input class="btn btn-secondary"
                 type="button"
                 name="read_weaves_btn"
                 onclick="readWeavesValidateAndSubmit()"
                 value="Read Weaves from GIF">

          <input class="btn btn-primary"
                 type="button"
                 name="select_weaves_btn"
                 onclick="selectWeavesValidateAndSubmit()"
                 value="Select Weaves">
        </div>
      </form>

    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="warnModal" tabindex="-1" role="dialog" aria-labelledby="warnModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="warnModalLabel">Warning</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button id="modal-btn-yes" type="button" class="btn btn-secondary">Yes</button>
          <button id="modal-btn-no" type="button" class="btn btn-primary">No</button>
        </div>
      </div>
    </div>
  </div>

{% endblock %}


{% block scripts %}
  <script language="javascript">

    // based on https://codepen.io/ajchambeaud/pen/KpVvMV
    var modalConfirm = function (callback) {
      $("#modal-btn-yes").on("click", function (e) {
        callback(true);
        $("#warnModal").modal('hide');
      });

      $("#modal-btn-no").on("click", function (e) {
        callback(false);
        $("#warnModal").modal('hide');
      });
    }

    function showWarnModal(message, formaction) {
      $('#warnModal .modal-body').text(message);
      $('#warnModal').modal('show');

      modalConfirm(function (confirm) {
        if (confirm) {
          console.log('confirmed');
          var form = window.document.fabricSpec;
          form.action = formaction;
          form.submit()
        } else {
          console.log('not confirmed');
        }
      });
    }

    function validate(formaction) {
      var form = window.document.fabricSpec;
      var shaftCount = form.shaftCount.value;
      var blockCount = form.blockCount.value;
      var valid = true;
      if (blockCount * 4 > shaftCount) {
        var warning = "You specified more blocks than your loom can weave without using pickup. " +
          "Do you wish to Proceed?"
        {#valid = confirm(warning);#}
        showWarnModal(warning, formaction);
        valid = false;
      }
      console.log('validate: valid:', valid);
      return valid;
    }

    function readWeavesValidateAndSubmit() {
      var formaction = "{{ url_for('selectgif.select_gif_file', _external=True) }}";
      console.log("formaction: ", formaction)
      if (validate(formaction)) {
        var form = window.document.fabricSpec;
        form.action = formaction;
        form.submit()
      }
    }

    function selectWeavesValidateAndSubmit() {
      var formaction = "{{ url_for('weavemap.weave_map', _external=True) }}";
      console.log("formaction: ", formaction)
      if (validate(formaction)) {
        var form = window.document.fabricSpec;
        form.action = formaction;
        form.submit()
      }
    }

  </script>
{% endblock %}