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.

This link shows two different ways of doing just that: http://stackoverflow.com/questions/8982087/add-or-subtract-functions-from-onsubmit-event-handler — WebStakker, Dec 12 '12 at 22:20
Not to dodge the question but I would highly recommend PHP for form related things. — aug, Dec 12 '12 at 22:33
@aug I wish I had php at my disposal here, but as my question states, I'm only able to customize some javascript that would get inserted right above the '
' tag. — alex, Dec 13 '12 at 04:50

Weave · Accepted Answer · 2012-12-13T05:10:12.377

11

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.

edited Dec 13 '12 at 05:10

answered Dec 12 '12 at 22:42

Weave

211
2
4

Thanks! Since the form will already be rendered by the time the JavaScript is loaded (inserted before the `
` tag), would that change anything to your approach above or will it work just the same?
– alex Dec 13 '12 at 04:56
1

@alex if the form is already rendered then it would not be necessary to put this in the window.onload event handler. So you would not need to wrap this with window.onload = function() {}. This event is triggered when the page is finished rendering. I added this to be safe as I could not be sure where the script would be loaded. – Weave Dec 13 '12 at 05:08

Adding onsubmit to a form via javascript

1 Answers1

Linked