Develop Reference

Javascript: Invoke function directly or dispatch event?

Where we have js code that submits a form instead of just submitting the form like:
form.submit();
Should we instead dispatch a (bubbling, cancelable) event in order to allow other potential js event listeners the chance to handle the form submission:
form.dispatchEvent(new Event('submit', {bubbles: true, cancelable: true}));
It seems like this allows our code to play more nicely with others. If this is true, why isn't this pattern pushed more?

HTMLFormElement.requestSubmit() to the rescue!
In most cases in which a form is to be submitted programmatically via JavaScript, it's wise to use requestSubmit() rather than submit(). Doing so ensures submit handlers will have a chance to handle the submit event. Use submit() only when you want to explicitly submit the form ignoring any registered submit event listeners and form validation.
I was simply not aware of this newer form method.
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
The HTMLFormElement.submit() method submits a given <form>.
This method is similar, but not identical to, activating a form's
submit <button>. When invoking this method directly, however:
No submit event is raised. In particular, the form's onsubmit event handler is not run.
Constraint validation is not triggered.
The HTMLFormElement.requestSubmit() method is identical to activating
a form's submit <button> and does not have these differences.
And usage notes from https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
The obvious question is: Why does this method [requestSubmit()] exist, when we've had the submit() method since the dawn of time?
The answer is simple. submit() submits the form, but that's all it
does. requestSubmit(), on the other hand, acts as if a submit button
were clicked. The form's content is validated, and the form is
submitted only if validation succeeds. Once the form has been
submitted, the submit event is sent back to the form object.

jQuery off() Before Form Submission

I'm learning how to use jQuery and I'd like to understand what the purpose of using the off() method before submitting a form is. For example, in the following code, the form is first prevented from sending using preventDefault(), some Ajax is done and when finished, the form is finally submitted. But why do I need to use off() before submit()?
$(document).ready(function() {
$('form[name="Payment"]').on('submit', function( e ) {
e.preventDefault();
AjaxCall();
$(document).ajaxStop(function() {
$('form[name="Payment"]').off('submit').submit(); // Once Ajax request are finished, submit the form.
});
});
});

Because triggering the same event would run all that same event handler code again.
The default would always be prevented, the ajax would be called ....and then the event would be triggered again and you would have an infinite loop without changing something.
Removing the event listener would make any subsequent submit use browser default process
There are other ways around this...but this answer explains what was asked

event trigger on submit

I want to perform javascript validation after user submits the form. Documentation for jQuery .submit() clearly says:
The submit event is sent to an element when the user is attempting to submit a form.
But if I put
$('form.simple_form.new-channel').submit perform_validation()
into my code, perform_validation() is triggered every time page is rendered! Even when there is no form on it and no 'submit' button. What is the correct way to call a function after submitting a form?

I believe You dont want to trigger action after submitting, You just want to run it after user clicks submit button.
Wouldn`t it work put like that?
$('form.simple_form.new-channel').submit(function(e){
if(!perform_validation()){
e.preventDefault(); //prevents form from being submitted if validation fails
return; //exits function
}
})
Your perform_validation function should then return Boolean value.
EDIT:
You wrote Your function like this:
$('form.simple_form.new-channel').submit perform_validation()
which is exact the same as writing:
$('form.simple_form.new-channel').submit;
perform_validation();
In Your version script just runs the perform_validation() because it isn`t inside event handler.
You could also do it this way:
$('form.simple_form.new-channel').submit(perform_validation);
This one tells the script to run on the form submit, the function which name is passed as an argument.

The problem is your syntax.
$('form.simple_form.new-channel').submit perform_validation()
Because of javascript's liberality the fact that you are not invoking submit here and you have no semicolin after perform_validation... causes no error, but simply invokes perform validation as if it was on the line all by its self with a semicolin.
to correct this, do this
$('form.simple_form.new-channel').submit(perform_validation);

Binding to the click event of a submit button, will our JS run before the form submits?

We are currently binding to the click event of a submit button (there are reasons why we are not binding to the submit event for the form). Is it guaranteed that our JS will run before the form submits (as we are entering values into hidden fields that we want to submit) or do we need to prevent the form from submitting and then call the submit again?
$(function() {
$('#button').on('click', function() {
// Do some stuff here - needs to finish before the form submits
return true;
});
});
Thanks in advance!

It will work before the submit event is sent, but you are only listening for the click event. If the user hits enter, the form will be submitted without running your code. I think you should stick to the submit event. The callback function will receive as argument the event (and you can do things like e.preventDefault(); or e.stopPropagation();
$("form").on("submit",function(event){});

In my expierience the code in the click event will always run first.
I just ran a simple test on latest chrome with a loop that loops 10,000 times. The form did not submit until after the loop was finished (~5 seconds).
If you try to run some ajax call, or setTimeout in the click function though, the form will most likely submit before your callback/ajax is finished.

jquery .submit(handler) doesn't appear to be detecting form submission

so I'm trying to intercept a javascript form submission using jquery, and having some issues. I put Spring in the tags because I wonder if the issue could be that I'm using a spring form:form tag, rather than just a straight html form. Basically, the handler seems to be totally ignored, with the submission going on regardless.
The relevant code is as follows:
function submitForm(functionName){
var form = document.getElementById("evalAdminForm");
//does some stuff
form.submit();
}
$('form').submit(function(){
alert("SUBMITDETECTED");
});
<form:form commandName="evaluation" id="evalAdminForm" name="evalAdminForm" method="post">
//the form is in here
</form:form>
Thanks!

Submit events fire when forms are submitted manually, not in response to JavaScript calling the submit method.
If you are going to trigger form submission using JS (and there is almost never a time when doing so is better than having a submit button) then you need to manually fire any other functions you want to run at the same time.