检查输入后不提交表格

Question

在用户等形式中，填充整数。 当他提交表格时，我想查一下这个号码。 如果number < 100那么表格要正常提交。 如果没有，那么我想向他显示一个确认窗口，如果选择确定，则提交表格。

 $('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> 

我有2个问题。 如果用户填写的number < 100那么我会收到错误too much recursion ，如果用户填写更大的数字，然后弹出窗口不断打开，我无法提交表单。

我错过了什么？

Answer 1

要根据jQuery 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(); 在您的提交处理程序中阻止提交。 只有当你不想要提交时才这样做。

编辑

另外：即使你将调用$('form').submit() ，它将以递归方式调用同一事件，并将再次被阻止，并将一次又一次地递归调用。 因此，在您有兴趣提交的条件下，请调用e.preventDefault(); 只有在那些块中并删除$('form').submit() ，您已经处于提交事件中，因为它已被提交。

Answer 3

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

Answer 4

删除form submit内部form submit的功能。它的再次产生。那为什么它给予警告的循环效应和again.Do你的函数从提交成功时

 $('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

 $('#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; }); 

 <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>