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

Question

我有一个html表单，其中用户用整数填充输入。

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

我想做的是，当用户提交表单时，将输入与数字进行比较，如果满足条件，则将显示一个弹出窗口，并在继续提交之前要求确认。

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

请参见下面的代码段。

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

现在，仅在条件（整数比较）为true时弹出确认窗口。 我们还会在确认窗口中得到他的决定：“ 确定”或“取消”，因此我们可以相应地处理每种情况：

 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>