How to trigger submit form using jQuery

Question

I am trying to track comments on blog posts via Google Universal Analytics. I want the label to pick up the name of the blog post so I'm using jQuery to fire the event.

So far I have the following code (which is based on code I used for other websites and work fine) - obviously I must have overlooked something as it is not working:

$(document).ready(function(){
   $('#commentform').submit(function(){
     var postname = $('h2.post-title').text();
     ga('send', 'event', 'Engagement', 'Comment', postname, 5);

   });
});

Any thoughts?

(Sorry I would link to the blog but it is not live yet)

Thanks

return false after ga(...);

ElSinus
– ElSinus

2013-04-23 12:01:33 +00:00
Commented Apr 23, 2013 at 12:01 — ElSinus
– ElSinus, Commented Apr 23, 2013 at 12:01
what error do you have? what is problem? Just not working?

Anton Baksheiev
– Anton Baksheiev

2013-04-23 12:03:04 +00:00
Commented Apr 23, 2013 at 12:03 — Anton Baksheiev
– Anton Baksheiev, Commented Apr 23, 2013 at 12:03
I think the problem is the page is refreshing

Arun P Johny
– Arun P Johny

2013-04-23 12:04:39 +00:00
Commented Apr 23, 2013 at 12:04 — Arun P Johny
– Arun P Johny, Commented Apr 23, 2013 at 12:04

MythThrazz · Accepted Answer · 2013-04-23 13:51:24Z

2

$(document).ready(function(){
$('#commentform').submit(function(){
var postname = $('h2.post-title').text();
ga('send', 'event', 'Engagement', 'Comment', postname, 5);
});
});

First of all. This code assigns the text of a h2 tag with class post-title found in the document. A way more reliable way to get the title of the post would be an id.

Secondly, it may not work, because the form is submited before the Google Analitycs code fires. So you should stop the default behaviour and submit the form after the analitycs finishes sending it's data. (See: https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#hitCallback)

$( document ).ready( function() {
    $( document ).on( 'submit', 'form#commentform', function( e ) {
        var postname = $( '#post-title' ).text();
        ga( 'send', {
            'hitType': 'event',
            'eventCategory': 'Engagement',
            'eventAction': 'Comment',
            'eventLabel': postname,
            'eventValue': 5,
            'hitCallback': function() {
                //now you can submit the form
                //$('#commentform').off('submit').trigger('submit');
                $('#commentform').off('submit'); //unbind the event
                $('#commentform')[0].submit(); //fire DOM element event, not jQuery event
            }
        });
        return false;
    });
});

Edit: I just realised the code from hitCallback might not work. The revised version should call the event of the DOM element and in result - send the form.

Edit2: Corrected the event binding in case the form doesn't exist when document.ready() is fired

edited Apr 23, 2013 at 13:51

answered Apr 23, 2013 at 12:29

MythThrazz

1,65719 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

vikki Over a year ago

Thanks MythThrazz - I copied/pasted what you posted but it is still not working. I'm not getting any error message, just no code firing. Am I supposed to add something to it? (I added the id to the h2)

MythThrazz Over a year ago

I forgot to mention that's the code for jQuery 1.9+ can/do you use it? Also which code isn't firing? The event callback or the hitCallback?

vikki Over a year ago

Yeah the site used jQuery 1.9 -- the event isn't firing

MythThrazz Over a year ago

If the event's isn't firing maybe there's no form with id="commentform" ? At least not on $(document).ready()

vikki Over a year ago

Correction - the site is now using jQuery 1.9 and everything is working fine. Thanks for your help!

|

yaakov · Accepted Answer · 2013-04-23 12:04:35Z

0

Hard to tell without looking at an actual page, but likely the browser is redirecting to the form's submission before ga's network call is made. You'd need a way to wait for ga to finish, then finish submitting the form.

answered Apr 23, 2013 at 12:04

yaakov

5,9191 gold badge40 silver badges48 bronze badges

1 Comment

mike Over a year ago

Pre-Universal Analytics, you'd have to add a delay after submitting the event. With Universal Analytics, you can specify a hitCallback that runs after the data has been sent.

Collectives™ on Stack Overflow

How to trigger submit form using jQuery

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related