Form Submit Event

Question

If I add a handler for a form submit event, it is triggered before JQuery validation is done. If the validation fails, then the form is not submitted the server. Thus the event is really more of a 'submitting' than a 'submit'.

What event can I handle when the post is actually sent to submit the form?

http://stackoverflow.com/questions/374644/how-do-i-capture-response-of-form-submit — A. Meshu, May 11 '17 at 20:27
Afaik it really is submit event. The jquery validation simply prevents that submit event if validation fails (for instance using return false). — yezzz, May 11 '17 at 20:31
The question seems to be based on a false premise. The form submit event should call the jQuery validation code. The validation code can then return `false` or call `event.preventDefault()` if it wants to prevent the form from being submitted. — Barmar, May 11 '17 at 20:44
Post your validation code so we can help you understand why it isn't working. — Barmar, May 11 '17 at 20:45
I get that the form submit event calls the validation. That's why it's the wrong event for me. I want the event that comes after that. What I a want is a global way to catch when the from is actually posted. I don't want to simply catch the validation success event, because not all my pages use jquery validation. — Jasper Kent, May 11 '17 at 21:08
There is no event that occurs when the form is actually posted because the browser has already navigated to the URL set in the form's `action` attribute. It's too late for an event to fire on the form (or on its containing page), because the form is gone. — Heretic Monkey, May 11 '17 at 21:44
Thanks for the definitive answer Mike, though I have to say I don't follow the logic. Just because the form is gone doesn't mean an event can't be fire to say that it has. Many systems pair up ing/ed events. — Jasper Kent, May 13 '17 at 10:56

score 0 · Answer 1 · edited May 11 '17 at 21:42

Your question is a bit confusing, so I'll try to explain with examples the two ways to submit a form.

In the first example the form is:

Validate by the function

validate()

Submitted through the function

$( "#myform" ).submit()

$('#press').on('click', function(e){
  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>

This type of submission will refresh the page. For the page not refresh you need to use ajax.

In your trigger function you need to replace $( "#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"); 
  }
});

This way send the data in a Json array. This way you can have server feedback through the success function.

Don't answer confusing questions: Ask for clarification through comments, and come up with an answer for the clarified question. — Blue, May 11 '17 at 21:43

Form Submit Event

1 Answers1