フォーム送信イベント

Question

フォーム送信イベントのハンドラを追加すると、JQueryの検証が完了する前にトリガされます。検証が失敗した場合、フォームはサーバーに送信されません。したがって、イベントは実際には「提出」よりも「提出する」ものです。

実際にフォームを送信するために投稿が実際に送信されたときに、どのようなイベントを処理できますか？

Answer 1

あなたの質問はちょっと混乱しているので、フォームを送信する2つの方法について例を挙げて説明します。

最初の例では、フォームがある：関数によって

検証

validate() 

機能を通じて提出

$("#myform").submit() 

$('#press').on('click', function(e){ 
 
\t \t e.preventDefault(); 
 
    var val = validate(); 
 
    if(val == true){ 
 
    var r = confirm("Submit form!") 
 
    var txt; 
 
    if (r == true) { 
 
    txt = "You pressed OK!"; 
 
    //$("#myform").submit(); //use this for submitting the form 
 
} else { 
 
    txt = "You pressed Cancel!"; 
 
} 
 
    alert(txt); //this line of code for test reasons 
 
    } 
 
    else{ 
 
    alert("input fields empty"); 
 
    } 
 
}); 
 

 

 
function validate(){ 
 
    var val = true; 
 
    var teste1 = $("#input1").val(); 
 
    var teste2 = $("#input2").val(); 
 
    if(teste1== "" || teste1 == null){ 
 
     var val = false; 
 
     //some css and jquery to change the input color 
 
    } 
 
    if(teste2 == "" || teste2 == null){ 
 
     var val = false; 
 
     //some css and jquery to change the input color 
 
    } 
 
    return val; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id = "myform" action="test.php" method="post">  
 
<input type = "text" id ="input1" value = ""> 
 
<input type = "text" id ="input2" value = ""> 
 
<button id = "press" type="button">Click Me!</button> 
 
</form>

このタイプの送信はページを更新します。ページがリフレッシュされない場合は、ajaxを使用する必要があります。

トリガー機能では、$("#myform").submit();を交換する必要があります。

var teste1 = $("#input1").val(); 
var teste2 = $("#input2").val(); 
$.ajax({ 
    method: "POST", 
    url: "test.php", 
    datatype:"Json", 
    data:{ 
     "data1": teste1, 
     "data2": teste2 
     }, 
    success: function(result){ 
    alert("result"); 
    } 
}); 

この方法でデータをJsonアレイに送信します。これにより、成功関数を通じてサーバーのフィードバックを得ることができます。