Form Submit JavaScript Event Not Firing

Get Help
, , ,
1

In version 2.8.18, when the user clicks the submit button, the native JavaScript form submit event fires. In version 2.9.0 and beyond, the event does not fire. I’ve tested this on the Gravity Forms demo page with this code in the inspector console:

document.querySelector('#gform_49').addEventListener('submit', e => {console.log('submitting the form')});

When clicking submit, this event does not fire. I checked to make sure I set “persist logs” so that I wouldn’t miss it.

I can tell the submit button HTML changed between those versions, but I can’t tell if the submit event is being blocked intentionally or not.

Without the submit event, some JavaScript analytics trackers are not working.

2

The product team implemented a JS-based form submission handler in 2.9 to ensure that all submissions, regardless of the embed/submission method (default postback, legacy iframe-based Ajax, or new experimental real Ajax), are processed in a consistent way, and that add-ons can integrate into the process in a standardised way without writing their own full submission handlers.

It also handles blocking duplicate submissions, adding the honeypot version hash to the submission, and triggering integrations like reCAPTCHA.

The recommended way to perform custom tasks between the button being clicked and the request being posted to the server is by using the new gform/submission/pre_submission filter:

Another usage example can be found here:

3

Thanks for the context, Richard.

We’re using Snowplow on my end, and it’s designed to track form submissions based on the browser’s native form submit JavaScript event. The event listeners are all in Snowplow’s code.

I can’t hook in to the pre_submission filter and then call a Snowplow function-- those functions aren’t exposed for me to use. It’s supposed to just be plug and play, minimal configuration.

What should people do if they’re in that situation? Deactivating the native submit event seems like it will break many similar JavaScript libraries.

While I do think that this should be refactored to allow third-party libraries to continue functioning as intended, I was able to fix the JS tracking with this code:

document.querySelectorAll('[type="submit"]').forEach(el => {
	el.addEventListener('click', e => {
		el.closest('form').dispatchEvent(new Event('submit'));
	});
});
4

@richardw8k, just checking in-- do you have any more thoughts on this?

5

You can suggest adding support for scenarios like this directly to the product management team for consideration when planning future releases on the Gravity Forms product roadmap page.