サブミットボタンのクリック時にポップアップウィンドウを表示するには

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

条件（整数比較が）真であれば今すぐ確認ウィンドウがポップアップ表示のみ。そして、我々はまた、確認ウィンドウで彼の決定を得る：OKか私たちはそれに応じてそれぞれのケースを扱うことができるキャンセル：

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>

Answer 2

スニペットの下を参照してください。

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