Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?

Question

I have the following:

<script type="text/javascript">
function CancelFormButton(button) {
    $(button.form).submit();
}
</script>

<form onsubmit="alert('here');">
<input type="button" value="Cancel" onClick="CancelFormButton(this);" />
</form>

When I click the "Cancel" button, the onsubmit from the form tag is not triggered.

This line instead submits the form successfully: $(button.form).submit(); but skips the alert('here'); within the onsubmit in the form tag.

Is this correct or am I doing something wrong?

By the way, in this case, I want this functionality, but I'm just wondering if I'm going to run into a problem in a browser where the onsubmit is triggered.

Answer 1

Sorry, misunderstood your question.

According to Javascript - capturing onsubmit when calling form.submit():

I was recently asked: "Why doesn't the form.onsubmit event get fired when I submit my form using javascript?"

The answer: Current browsers do not adhere to this part of the html specification. The event only fires when it is activated by a user - and does not fire when activated by code.

(emphasis added).

Note: "activated by a user" also includes hitting submit buttons (probably including default submit behaviour from the enter key but I haven't tried this). Nor, I believe, does it get triggered if you (with code) click a submit button.

Answer 2

Try to trigger() event in your function:

$("form").trigger('submit'); // and then... do submit()

Answer 3

I found this question serval years ago.

recently I tried to "rewrite" the submit method. below is my code

window.onload= function (){
for(var i= 0;i<document.forms.length;i++){
 (function (p){
  var form= document.forms[i];
  var originFn= form.submit;
  form.submit=function (){
   //do something you like
   alert("submitting "+form.id+" using submit method !");
   originFn();
  }
  form.onsubmit= function (){
   alert("submitting "+form.id+" with onsubmit event !");
  }
 })(i);


}

}

<form method="get" action="" id="form1">
<input type="submit" value="提交form1" />
<input type="button" name="" id="" value="button模拟提交1" onclick="document.forms[0].submit();" /></form>

It did in IE,but failed in other browsers for the same reason as "cletus"

Answer 4

I am looking for an answer to this also... But I can tell you that you can get the onsubmit to fire from javascript two ways.

1. You can click the submit button (please note it must be a button of type submit).
2. you can call the onSubmit function directly.

My question though is that this specifically does not work with jQuery. It works with plain old javascript, but if you try and trigger onSubmit, call onsubmit, it doesn't work.

I suspect (and I have to go find out if this is true), that you can use "this" from within the button and then reference the form it is part of and call the onsubmit function from there.

 
<form name="my_form" id="my_form">
<!-- Your form elements -->
<input type='submit' name='my_button'>
<script type="text/javascript">
$('#my_button').click(
      function()
      {
          this.form.onsubmit();
      }
);
</script>
</form>
 

Another way to get there ...

 
$('#my_button').attr('form').onsubmit();
 

Which you can embed in other code to trigger the onsubmit function, say for a onChange in a select...

What definitely doesn't work is:

$('#my_button').click(
    function()
    {
        $('#my_form').trigger('onsubmit');
        // Or 
        $('#my_form').onsubmit();
       // or 
        $('#my_form').trigger('onSubmit');
       // or  even --
        $('#my_form').submit();
    }
 );

Answer 5

My simple solution:

$("form").children('input[type="submit"]').click();

It is work for me.