Capturing Form Submit client side

A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More.

AI OnAI Off

Home / Forums / Developers (Apps and Integrations) Forum / Add-ons /

Capturing Form Submit client side

Matt S

Vote:

I'm looking to capture the form submit event in my javascript so that I can push Google Tag Manager data out to Google. I've tried every combination of events however it looks like EPiServer is not doing a normal form submission. Can you point me in the direction to capture this event?

On submit I will capture all of the element values and insert them into GTM datalayer push. I've can accomplish this just not on form submission.

Thanks!

#147660

Apr 20, 2016 18:15

valdis

Vote:

Hi,

What do you mean by "EPiServer is not doing normal form submission"? What kind of approaches you tried before already?

#147661

Apr 20, 2016 20:14

Matt S

Vote:

Hi,

I'm not sure. I am able to capture the form post when I change "injectFormOwnJQuery" = false, however, that breaks the form validation. I have also tried to alter the form to have a onSubmit javascript method but no luck.

I have tried the following using jQuery:

$(function() { 
    $('#formID').on('submit', function(e) {
        alert('testing');
        e.preventDefault(); 
    });
    $('#formID').submit(function(e) {
        alert('testing');
        e.preventDefault(); 
    });
    $('#formID').submit(function() {
        alert('testing');
        e.preventDefault(); 
    });
});

#147666

Edited, Apr 20, 2016 20:43

Thach

Vote:

Hi,

It is easily to capture Form submiting event in clientside. You don't have to alter Forms Javascript API or do anything special because Forms raise suitable events. Please read this article with sample code http://world.episerver.com/add-ons/episerver-forms/handling-events-for-episerver-forms/

PS: This is not a solution to your problem. Just some extra info.

You should set configuration of "injectFormOwnJQuery"=false only if you already have jQuery in your site (and you don't want another jQuery instance of Forms), Please read this article https://medium.com/@lockevn/speed-up-episerver-forms-in-view-mode-2a8a05911ff3#.e6ca392fq for more information.

#148165

Edited, May 05, 2016 8:29

Matt S

Vote:

Thanks Thach! This is exactly what I was looking for.

#148202

May 05, 2016 16:18

This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.