Returning πšπšŠπš•πšœπšŽ from an πš˜πš—πš‚πšžπš‹πš–πš’πš() listener doesn’t stop submission β€” or do anything at all!

A user had buggy 3rd-party JS causing forms to be submitted 2x. Unable to find the root cause in their stack of plugins, they tried a desperate fix: add an onSubmit() listener and stop submission if the listener runs a second time.

Like so:

MktoForms2.whenReady(function(readyForm){
   let stopFutureSubmissions = false;
   
   readyForm.onSubmit(function(submittingForm){
      if(stopFutureSubmissions) {
         return false;         
      }
      
      stopFutureSubmissions = true;
   });
                      
});

Fine idea in theory, but that’s not how you stop form submission. The Marketo onSubmit() listener stack doesn’t care if you return false from every single listener! That is, it’s not like DOM event handlers where return false is interpreted as canceling the event.[1]

To stop submission, assuming you have complete control over the listener stack, simply set form.submittable(false):

MktoForms2.whenReady(function(readyForm){
   
   readyForm.onSubmit(function(submittingForm){
      submittingForm.submittable(false);
   });
                      
});

(If something is trying to submit the form multiple times, you’ve still gotta fix that at the source. This hack is a β€œleave in place for a week, seek outside help if you can’t find the cause” type thing.)

Notes

[1] Not only is the Forms 2.0 API a custom API, even native addEventListener() doesn’t care about return false. Only the primitive element.onsubmit = someFunction method gives return false special meaning.