在提交表单上显示模式，然后按提交表单

Question

我已经编码了 example。

$(document).ready(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    var quantityUser = $('#quantityUser').val(); // Read the user input
    var quantityW9 = $('#quantityW9').val(); //the number to compare

    if (quantityUser <= quantityW9) {
      this.submit();
    } else {
      $('#alertQuantity').modal('show');
    }
  });

  $('#cfmContinue').click("click", function(e) {
    console.log("submitttt");
    $('#myform').submit();
  });
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <form id="myform" method="post" action="https://whosebug.com/" role="form">
      <div class="col-lg-3 my-2">
        <label for="firstName">Quantity</label>
        <input id="quantityUser" name="quantity" type="text" value="150" class="form-control" />
        <small id="quantityW9" class="form-text text-muted">100</small>
      </div>
      <div class="col-1 my-2">
        <button type="submit" class="btn btn-primary" autofocus>Go</button>
      </div>
    </form>
  </div>
  <div class="modal fade" id="alertQuantity" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLongTitle">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">
          <p>Are you sure;</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button id="cfmContinue" type="button" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

在提交表单时，我进行了检查。如果此检查为真，我会向用户显示 bootstrap modal 并显示一条消息。然后，用户可以继续提交表单，按下模式中的 Submit 按钮。

但是，$('#myform').submit(); 不起作用，表单未提交。

Answer 1

获取比较值的.text()
转换为数字
调用DOM提交事件不再执行事件处理程序

$('#myform').on('submit', function(e) {
  var quantityUser = $('#quantityUser').val(); // Read the user input
  var quantityW9 = $('#quantityW9').text();    //the number to compare
  if (+quantityUser > +quantityW9) {
    e.preventDefault();
    $('#alertQuantity').modal('show');
  }
});

$('#cfmContinue').click("click", function(e) {
  console.log("submitttt");
  $('#myform')[0].submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <form id="myform" method="post" action="https://whosebug.com/" role="form">

      <div class="col-lg-3 my-2">
        <label for="firstName">Quantity</label>
        <input id="quantityUser" name="quantity" type="text" value="150" class="form-control" />
        <small id="quantityW9" class="form-text text-muted">100</small>
      </div>

      <div class="col-1 my-2">
        <button type="submit" class="btn btn-primary" autofocus>Go</button>
      </div>
    </form>

  </div>


  <div class="modal fade" id="alertQuantity" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLongTitle">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">
          <p>Are you sure;</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button id="cfmContinue" type="button" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </div>

</div>

Answer 2

@yaylitzis 其实你的代码 "considering that onSubmit will be triggered every time the form got submitted" 的问题是永远不会满足条件，因为即使你从模态中确认用户数量大于 w9.

要完成这项工作，您需要一个检查标志，以便您可以在您的条件下使用它，对于 quantityW9 也需要使用 .text() 而不是 val() 作为其非输入标签。

$(document).ready(function () {
  var checkPass = false;

  $('form').on('submit', function (e) {
    e.preventDefault();
    console.log("submit form");
    console.log("checkPass: ", checkPass);
    var quantityUser = parseInt($('#quantityUser').val());
    var quantityW9 = parseInt($('#quantityW9').text());
    console.log(quantityUser, quantityW9);

    if (quantityUser <= quantityW9 || checkPass == true) {
     console.log("Success");
     return true;
    } else {
     checkPass = false;
     console.log("Confirmation check");
     $('#alertQuantity').modal('show');
    }
 });

 $('#cfmContinue').click("click", function (e) {
   checkPass = true;
   $('body #myform').submit();
   $('#alertQuantity').modal('hide');
 });         
});

在提交表单上显示模式，然后按提交表单

On submit form show modal and then press submit form

javascript

jquery

form-submit

bootstrap-modal