Passing radiobutton value to an event tracker

harik · 07-13-2011, 09:16 AM

Need help please...new to JS

On Form submission, I am trying to pass a variable (var radioValue, which is the RadioButton selection) as Opt Label in the _gaq.push event tracker (google analytics)as follows

onclick="_gaq.push(['_trackEvent', 'Visitor', 'Submit', radioValue]);"

However radioValue value is not getting passed

Code snippets are attached below. Not sure whether the problem is in the JS function or whether i am calling the var incorrectly in the _gaq.push script...Thank you

The radioValue is captured in the overall form validation function as below.

Hari
-------------------------------------------------------------
(in HTML head)

/////other overall form functions
var radio_choice = false;
for (counter = 0; counter < document.form.RadioGroup.length; counter++)
{
if (document.form.RadioGroup[counter].checked == true){
radio_choice = true;
radioValue=(document.form.RadioGroup[counter].value);
}

}

if (!radio_choice)
{
alert("Please select again.");
return (false);
}

/////other overall form functions

------------------------------------------------------------

RadioButton Input script (in HTML body)

<input name="RadioGroup" value="abc1" type="radio" />abc1</td><td> </td></tr>
<input name="RadioGroup" value="abc2" type="radio" />abc1</td><td> </td></tr>
<input name="RadioGroup" value="abc3" type="radio" />abc1</td><td> </td></tr>

ereignis · 07-13-2011, 10:13 AM

can you post the rest of your code? it might be a variable scope issue, but i don't know where everything is declared or how the value is getting passed around.
i tested the above code and 'radioValue' is fine, but i'm not sure the value is available to whatever element you've got that 'onclick' function attached to. would also probably be better if you took the click behavior out from the inline code and scripted the event attachment...

harik · 07-13-2011, 02:54 PM

ereignis,

attached is the entire code....the ones in blue font are the relevant snippets for the radio button parts. Have declared var radioValue as global right at the beginning of the overall function.

the onsubmit _gaq event tracker is a google analytics async tracking function (right at the bottom in the input submit button - inline).

thanks

========================================================

<title>Submission Form</title>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
// tracking scripts
</script>
<style type="text/css"></style>
<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

Code:

var radioValue;

Code:

var radio_choice = false;
radioValue ="";
for (var counter = 0; counter < document.form.RadioGroup.length; counter++)
{
if (document.form.RadioGroup[counter].checked == true){
radio_choice = true;
radioValue=(document.form.RadioGroup[counter].value);
}

}

if (!radio_choice)
{
alert("Please select again.");
return (false);
}

}

function checkPhone(str){
var digitCheck = /^\d+$/;
if(digitCheck.test(str)){
return true;
} else {
return false;
}

}

//-->
</script>
</head>
<body>

Code:

<p class="heading">Submission Form </p><label></label>
<form method="POST" action="Submission.php" name="frm" onsubmit="return validate_form();">


<td valign="middle" align="left"><strong>Select a Test:</strong></td>

<td valign="middle" align="left"><label><input name="RadioGroup" value="abc1" type="radio" />abc1<br />
</label></td>
<td>&nbsp;</td></tr>
<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left">&nbsp;</td>
<td>&nbsp;</td></tr>
<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left"><label><input name="RadioGroup" value="abc2" type="radio" />abc2</label></td>
<td>&nbsp;</td></tr>
<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left">&nbsp;</td>
<td>&nbsp;</td></tr>

<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left"><label><input name="RadioGroup" value="abc3" type="radio" />abc3</label></td>
<td>&nbsp;</td></tr>
<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left">&nbsp;</td>
<td>&nbsp;</td></tr>
<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left"><input name="RadioGroup" value="abc4" type="radio" />abc4</label></td>
<td>&nbsp;</td></tr>
<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left">&nbsp;</td>

<td>&nbsp;</td></tr>
<tr>
<td valign="middle" align="left">&nbsp;</td>
<td valign="middle" align="left"><input name="RadioGroup" value="abc5" type="radio" />abc5</label></td>

<td valign="middle" align="left"><label><input name="Submit" value="Take a Test Now" type="submit" onsubmit="_gaq.push(['_trackEvent', 'Visitor', 'Submit', radioValue]);"/><input name="Submit2" value="Clear" type="reset" /></label></td>

ereignis · 07-13-2011, 08:14 PM

wow that's a mess.
first - there is no "onsubmit" handler for a submit button. the form-level onsubmit (the validation script) is immediately called when you click it since the push code is attached to an invalid event.
depending on the order, you want the button to call the validation routine, and if it passes validation, then push radioValue and the other vars to the google array...

harik · 07-14-2011, 04:25 PM

ereignis

tried using onclick handler at button submission and onsubmit handler at Form definition....still does not work.

the problem could still be the way i am trying to capture the radoValue and pass it in the event handler....any suggestions there?