Fun aabout Forms w/Elements & GA

by deanpeters

HTML

<script src="http://www.phpform.org/formbuilder/js/view.js"></script>
<script src="http://www.phpform.org/formbuilder/js/calendar.js"></script>
<script src="http://www.phpform.org/formbuilder/formbuilder/view.php"></script>
<link rel="stylesheet" href="http://www.phpform.org/formbuilder/colors/color1/view.css">
<div id="form_container">
     
        <h1><a href="http://www.phpform.org/formbuilder/view.php?id=8de92b19de34b4283db0bc76b0701ce4">phpForm.org Test</a></h1>
        <form id="form_382510" class="appnitro"  method="post" action="http://www.phpform.org/formbuilder/formbuilder/view.php">
                    <div class="form_description">
            <h2>phpForm.org Test</h2>
                        <h3>Don't forget to turn on your Google Chrome Inspector / FireFox FireBug Console</h3>
                        <h4>Note how we push events up the DOM rather than binding each and every field.</h4>
            <p>Quick test of phpForm.org</p>
        </div>                        
            <ul >
            
                    <li class="section_break">
            <h3>Section Break</h3>
            <p></p>
        </li>        <li id="li_2" >
        <label class="description" for="element_2">Name </label>
        <span>
            <input id="element_2_1" name= "element_2_1" class="element text" maxlength="255" size="8" value=""/>
            <label>First</label>
        </span>
        <span>
            <input id="element_2_2" name= "element_2_2" class="element text" maxlength="255" size="14" value=""/>
            <label>Last</label>
        </span> 
        </li>        <li id="li_3" >
        <label class="description" for="element_3">Address </label>
        
        <div>
            <input id="element_3_1" name="element_3_1" class="element text large" value="" type="text">
            <label for="element_3_1">Street Address</label>
        </div>
    
        <div>
            <input id="element_3_2" name="element_3_2" class="element text large"...

JavaScript

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-442503-11']);
_gaq.push(['_trackPageview']);

console.log("_gaq-body-load");
console.log(_gaq); 

$(document).ready(function() {
/* 
 * the idea here is to use delegate rather than bind
 * ... in part for performance as we only listen to the grandparent div
 * ... but also so we can anonymously bind ot any number of of elements 
 * ... ... w/out having to know the element names, IDs, etc ...
 *
 * read:
 * http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html
 *
 * optimize:
 * http://mathiasbynens.be/notes/async-analytics-snippet
 *
 * methods:
 * http://code.google.com/apis/analytics/docs/gaJS/gaJSApi.html
 */

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-442503-11']);
_gaq.push(['_trackPageview']);

console.log("_gaq-ready");
console.log(_gaq);

(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();




$("#form_container").delegate(":radio", "click", function(e) {
    var selText = $('label[for=' + this.id + ']').text()
    var selValue = $(this).val();
    var selIDName = 'radio_' + this.name;
    // pushChangeEvent(,selIDName, selText, e);   
    var ret = _gaq.push(['_setAccount', 'UA-442503-11'], ['_setDomainName', 'hire.deanpeters.com'], ['_setAllowLinker', true], ['_setCustomVar', 2, 'JSFiddle-field-test', 'Input Field Test', 3], ['_trackEvent', 'radio', 'click', 'test val 1']);
    consoleInputLog(selIDName, selText, e);
    console.log(ret);

});


$("#form_container").delegate("select", "change", function(e) {
    var selText = $("option:selected", this).text();
    pushChangeEvent('select_' + this.name, selText, e);

});







var consoleInputLog = function(sElemName, sInputText, sEventObj) {
   ...