При отправке формы показать модал, а затем нажмите отправить форму

Question

Я закодировал этот пример .

$(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://stackoverflow.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://stackoverflow.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 На самом деле проблемы с вашим кодом, «учитывая, что onSubmit будет запускаться каждый раз при отправке формы», - это условие никогда не будет выполнено, даже если вы подтвердили, что из модального количества пользователя пользователь больше, чем количество w9.

Чтобы получить эту работу, вам нужен флажок проверки, чтобы вы могли использовать его в своих условиях, а также для totalW9 необходимо использовать .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');
 });         
});