Adding onsubmit to a form via javascript

Question

How would you go about inserting an OnSubmit attribute to a form via Javascript only?

I'm pretty new to javascript so if you're able to provide detailed example code, that would be most helpful!

Here's the situation: I'm using a hosted signup page through Chargify (a payments platform) in order to process credit cards for my app, and then send the user back to my own thank you/confirmation page.

Tracking the entire funnel through google analytics is proving quite elusive due to changing domains (my domain -> Chargify.com -> my domain), since the credit card page is hosted by Chargify on their own domain.

I'm getting close: I've been able to get cross-domain tracking working (chargify.com page gets logged in Google Analytics), and can link from my domain to chargify by adding the following onclick attribute to my signup link:

onclick="_gaq.push(['_link', 'http://my-domain.chargify.com/subscriptions/new']); return false;"

However, I cannot do the same thing on the way back (Chargify -> Confirmation page) because I do not have access to the Chargify hosted payment page code, and because the user is taken to my confirmation page via a form submission, not a normal link.

Partial Solutions (need your help to finish this up): Chargify allows several options for their hosted pages, one of them being to add custom javascript that gets inserted right before the </body> tag in a <script> tag.

I found some resources in the Google Analytics documentation on how to link pages, and adding the following to the Chargify form tag might work: onsubmit="_gaq.push(['_linkByPost', this]);" (source: https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._linkByPost)

The form tag does not currently have an onsubmit attribute, it's just this: <form action="/my_product/subscriptions" class="new_submission" id="hosted_payment_form" method="post">

Is there a way to use Javascript to simply append this attribute to the form tag? If you'd be able to provide a detailed example of what code I should insert inside of the <script> tag, that would be extremely appreciated.

Answer 1

window.onload = function() {
    var form = document.getElementById('hosted_payment_form');
    form.onsubmit = function() {
        _gaq.push(['_linkByPost', this]);
    }
}

I believe the above example is similar to what you need. We use document.getElementById to grab a reference to your form. Then set the onsubmit property to the code you want executed before the form is submitted. Remember to put this inside the window onload event if this JavaScript is executed before the page is rendered to ensure the form is built.