如何在单击提交按钮时显示弹出窗口

Question

I have a html form where the user fills an input with an integer.

<input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required>

What I want to do is when the user submits the form, compare the input with a number and if a condition is met then a popup window to show and ask for confirmation before the submit continues.

 $('form').on('submit', function(e) { e.preventDefault(); var quantity = $('#helpBlock').val(); // Read the user input var quantityW9 = 100; //the number to compare if (quantity > quantityW9) { console.log("quantity is bigger -> " + quantity); //Here show a confirmation window in order to continue } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-md-12"> <form id="form" method="post" class="form-horizontal" role="form"> <div class="has-warning"> <label for="inputWarning1" class="col-md-1 control-label">Quantity</label> <div class="col-md-2"> <input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button type="submit" name="formAction" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> 

Answer 1

See below snippet.

 $('form').on('submit', function(e) { e.preventDefault(); var quantity = $('#helpBlock').val(); // Read the user input var quantityW9 = 100; //the number to compare var result = confirm("you want to continue"); console.log(result); if(result){ if (quantity > quantityW9) { console.log("quantity is bigger -> " + quantity); //Here show a confirmation window in order to continue } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-md-12"> <form id="form" method="post" class="form-horizontal" role="form"> <div class="has-warning"> <label for="inputWarning1" class="col-md-1 control-label">Quantity</label> <div class="col-md-2"> <input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button type="submit" name="formAction" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> 

Answer 2

Now the confirmation window only pops up if the condition (integer comparison) is true . And we also get his decision in the confirmation window: OK or Cancel so we can handle each case accordingly:

 var can_submit = false; $('form').on('submit', function(e) { if(can_submit){ /*---START: ONLY FOR DEMONSTRATION PURPOSE---*/ e.preventDefault(); console.log("submitted now!"); /*---END: ONLY FOR DEMONSTRATION PURPOSE---*/ } else { e.preventDefault(); var quantity = $('#helpBlock').val(); // Read the user input var quantityW9 = 100; //the number to compare if (quantity > quantityW9) { console.log("quantity is bigger -> " + quantity); var confirmation = confirm("Do you want to continue"); if(confirmation){ console.log("Clicked OK - submitting now ..."); can_submit = true; $('form').submit(); } else { console.log("Clicked Cancel"); can_submit = false; } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-md-12"> <form id="form" method="post" class="form-horizontal" role="form"> <div class="has-warning"> <label for="inputWarning1" class="col-md-1 control-label">Quantity</label> <div class="col-md-2"> <input id="helpBlock" type="number" min="0" step="1" class="form-control" name="quantity" required> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button type="submit" name="formAction" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div>