How to add custom javascript into the drupal webform module <form> <submit>
Posted Tue, 12/01/2009 - 2:43pm
Recently, one of our clients asked to have custom tracking code implemented into their form submissions.
Since the client's site is built on Drupal, all forms are dynamically generated using the Webform module.
Their marketing company instructed us to add an 'onclick' code to :
<input type="submit" class="form-submit" value="Receive Coupons" id="edit-submit" name="op" onclick=tracking("track_submit_quote") />However, since the Webform module creates all forms dynamically, there was no convenient way of hard coding the code into the form... i.e. there was no way for this to be done via webform admin.
Nevertheless, after some research, we can easily accomplish this via 'drupal_add_js' and jquery by adding the below code into the 'description' field of the webform:
<?php
drupal_add_js
( '
$(function () { // make this code initialize when DOM loads
$("#edit-submit").submit(function () { // optional: replace "#edit-submit" with whatever CSS selector you want (ex: form, ID or class)
tracking("track_submit_quote"); // add custom function here
});
});
;'
,'inline');
?>'drupal_add_js' puts the code in 'head' and uses 'submit' instead of 'click' ...
we can use 'click' on specific links like so:
<?php
drupal_add_js( '
$(function () {
$("a[href=\'http://www.somesite.com/\']").click(function () {
tracking("track_submit_site");
});
});
;'
,'inline');
?>
Comments
what is the significance of
by Tamiami - 12/01/2009 - 3:02pm
what is the significance of 'inline' in drupal_add_js ? What does it do?
It puts the code in instead
by duntuk_admin - 12/01/2009 - 3:06pm
It puts the code in 'head' instead of including it in the global javascript file...
<script type="text/javascript" src="/sites/default/files/js/js_4952ecb022278d9734b57e31a63cc465.js"></script>I'm not sure if there is any benefit to doing it this way, it just helps me easily see the code in source when I was debugging it.
it looks like this:
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(function () {
$("#edit-submit").submit(function () {
tracking("track_submit_quote");
});
});
;
//--><!]]>
</script>
</head>
Can other tracking solution use this ?
by ealif - 03/09/2010 - 4:51am
Can other tracking solution use this
I believe so. All that
by duntuk - 04/20/2010 - 8:09pm
I believe so. All that function does is insert javascript code into the script section of the site... It depends on where it's located in your template--the current trend is to have all the javascript in the footer, since that speeds up page load times.
Post new comment