Unless you code your web pages in vanilla javascript, you’ll probably not notice this but when you do it’ll quite baffle you that the event listener you attach to a form’s submit event using addEventListener or onSubmit will not be invoked when you submit the form directly like this – form.submit().
What I am basically referring to, is this piece of code:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
var form = document.querySelector('#test_form');
form.addEventListener('submit', function (e) {
e.preventDefault();
alert('onSubmit handler called'); // Won't show up
}, false);
form.submit();
The event listener won’t be triggered and hence the alert message won’t pop up unless you (or the user) explicitly submit the form by clicking on the submit button of the form. Here’s a demo to illustrate this behaviour:
See the Pen form.submit() doesn’t call onSubmit event listener by Rishabh (@rishabhp) on CodePen.
Why such Behaviour?
This behaviour can get a bit frustrating at times when what you need is exactly the opposite of it. It’s not the same with other events like click(), focus(), etc. where the event handler is properly executed when you trigger those methods in your code directly with no user interaction. So the question is why is the behaviour with submit() like this ?
Now this is what the DOM Level 2 HTML specification states about an HTMLFormElement‘s submit method:
Submits the form. It performs the same action as a submit button.
But this specification is really old and antiquated. The living HTML standard by WHATWG (what browser vendors implement now) states the opposite of the old specification in its form submission algorithm section. The 5th item states that the submit event is fired on the form when the submitted from submit() method flag is not set, i.e., submit() method is not called. The 4th item is also interesting if you note which says that the HTML5 form validation rules will only apply, i.e., client-side validation will only happen when the form is not submitted via the submit() method.
Personally, I think the opposite behaviour of both the items would have probably been more useful to us, but then the folks preparing and implementing the specs probably know their shit.
Conclusion
So basically, a user interaction on a submit button is exactly what is required for the submit event handler to be invoked as well as the form validation to happen. Of course you can also trigger a click event on the submit button of the form, which in our earlier example would look something like this:
form.querySelector('input[type="submit"]').click()
The other option is to just use a library like jQuery (or frameworks like Backbone), whose internal implementation takes care of such inconsistencies. Most of us are already using a library or framework to take care of this issue anyway.
“library like jQuery (or frameworks like Backbone), whose internal implementation takes care of such inconsistencies.” – how do they do it please?