入力を確認した後にフォームが提出されない

Question

ユーザは、フォームの中で、整数を埋めます。彼がフォームを提出するとき、私はその番号をチェックしたい。 number < 100の場合は、フォームが正常に提出されます。そうでない場合は、確認ウィンドウを表示し、[OK]を選択するとフォームを送信します。

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

からとき、再び、なぜその所与の警告.thatループ効果を生み出すとagain.Doあなたの機能削除jQuery submitイベントハンドラ内の条件に基づいてフォームを作成する場合は、ネイティブサブミットイベントを呼び出す必要があります。それ以外の場合は、イベントハンドラがもう一度呼び出され、フォームあなたは `submit`イベントを上書きし、stackoverflowのまで、無限ループが発生している

$('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();は、送信ハンドラで送信できません。あなたが提出を許可したくないときにだけそれをしてください。

EDIT additonで

：あなたが再帰的に同じイベントを呼び出します$('form').submit()を呼ぶと再び阻止され、何度も何度も再帰的に呼び出します 場合でも。したがって、提出することに興味がある条件では、e.preventDefault();をそのブロックでのみ呼び出し、$('form').submit()を削除すると、提出されたため、すでに送信イベントになっています。

Answer 3

$（ 'form'）。submit（）; このコードは再帰的に呼び出します。

Answer 4

form submit機能.its内部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

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