Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?
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.
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.
This work around will fix the issue found by @Cletus.
function submitForm(form) {
//get the form element's document to create the input control with
//(this way will work across windows in IE8)
var button = form.ownerDocument.createElement('input');
//make sure it can't be seen/disrupts layout (even momentarily)
button.style.display = 'none';
//make it such that it will invoke submit if clicked
button.type = 'submit';
//append it and click it
form.appendChild(button).click();
//if it was prevented, make sure we don't get a build up of buttons
form.removeChild(button);
}
Will work on all modern browsers.
Will work across tabs/spawned child windows (yes, even in IE<9).
And is in vanilla!
Just pass it a DOM reference to a form element and it'll make sure all the attached listeners, the onsubmit, and (if its not prevented by then) finally, submit the form.