Google analytics event tracking: tracking links within a drop-down form

Question

I am trying to track the links contained in a dropdown within a form, but I am not sure how to return a dynamic value to the event tracking code.

My code is:

<form class="form" action="">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select option</option>

<optgroup label="Other">
<option value="link1" name="name1">Option 1</option>
<option value="link2" name="name2">Option 2</option>
</optgroup>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'); _gaq.push(['_trackEvent', 'Link', 'Join', ddmenu_name.name]);">
</form>

The event tracker just returns the label as ddmenu_menu.name

Can anyone help?

Answer 1

ddmenu_name.value works as a shortcut to the selected value because there is no other value for a select tag. But since there is a name attribute for the select tag itself, ddmenu_name.name is "ddmenu_name" as expected. So in order to get the name attribute of the selected option, you must get the currently selected option index and get the name attribute of it:

<form class="form" action="">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select option</option>

<optgroup label="Other">
<option value="link1" name="name1">Option 1</option>
<option value="link2" name="name2">Option 2</option>
</optgroup>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'); _gaq.push(['_trackEvent', 'Link', 'Join', ddmenu_name.options[ddmenu_name.selectedIndex].getAttribute('name')]);">
</form>