Form isn't submitted after checking the input

Question

In a form a user among other things, fills an integer. When he submit the form, I want to check that number. If the number < 100 then the form to be submitted normally. If not, then I want to show him a confirmation window and if selects Ok then the form to be submitted.

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare

  if (quantity < quantityToCompare) {
    console.log("Submit the form");
    $('form').submit();
  } else {
    console.log(quantity + " is bigger from " + quantityToCompare);

    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      console.log("submitting now ...");
      $('form').submit();
    } else {
      console.log("Clicked Cancel");
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" role="form">

      <label class="col-md-1 control-label">Quantity</label>
      <div class="col-md-2">
        <input id="quantity" type="number" class="form-control" name="quantity" required>
      </div>

      <div class="form-group">
        <div class="col-sm-2">
          <button type="submit" name="formAction" class="btn btn-success">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

I have 2 problems. If the user fills a number < 100 then I get an error too much recursion and if the user fills a bigger number and then the pop up window is constantly opening and I can't submit the form.

What I am missing?

Answer 1

要根据jQuery submit事件处理程序中的条件提交表单，您必须调用 native submit事件，否则只会再次调用事件处理程序，并且表单被禁止提交

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare

  if (quantity < quantityToCompare) {
    this.submit();
  } else {
    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      this.submit();
    } else {
      console.log("Clicked Cancel");
    }
  }
});

Answer 2

e.preventDefault(); in your submit handler is preventing to submit. do it only when you don't want allow for submit.

EDIT

In additon: Even if you will call $('form').submit() that will call the same event recursively and will be again prevented and will call recursively again and again. so, in the conditions you are nit interested to submit, call e.preventDefault(); only in those block and remove the $('form').submit(), you are already in submit event because it was submitted.

Answer 3

$（ '形式'）提交（）; 这段代码递归调用。

Answer 4

删除form submit函数中的form submit。产生循环效果。这就是为什么它会一次又一次地发出警告。从提交成功后做你的功能

$('form').on('submit', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare

  if (quantity < quantityToCompare) {
    console.log("Submit the form");
    //do your function
  } else {
    console.log(quantity + " is bigger from " + quantityToCompare);
    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      console.log("submitting now ...");
      //do your function
    } else {
      console.log("Clicked Cancel");
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" role="form">

      <label class="col-md-1 control-label">Quantity</label>
      <div class="col-md-2">
        <input id="quantity" type="number" class="form-control" name="quantity" required>
      </div>

      <div class="form-group">
        <div class="col-sm-2">
          <button type="submit" name="formAction" class="btn btn-success">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

Answer 5

＆＃13;

＆＃13;

$('#submit').on('click', function(e) {
  e.preventDefault();
  var quantity = $('#quantity').val(); // Get the user input.
  var quantityToCompare = 100; //the number to compare
  var submitFlag = true;
  if (quantity < quantityToCompare) {
    submitFlag = true;
  } else {
    submitFlag = false;
  }

  if (!submitFlag) {
    var confirmation = confirm("Do you want to continue with the submit ?");
    if (confirmation) {
      submitFlag = true;
    } else {
      console.log("Clicked Cancel");
    }
  }

  if (submitFlag)
    console.log("SUBMIT"); // $("#form").submit();
  else
    return false;

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12">
    <form id="form" method="post" role="form" action='http://www.google.com'>

      <label class="col-md-1 control-label">Quantity</label>
      <div class="col-md-2">
        <input id="quantity" type="number" class="form-control" name="quantity" required>
      </div>

      <div class="form-group">
        <div class="col-sm-2">
          <button name="formAction" id="submit" class="btn btn-success">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;