I've been working on a number of ways to do this and I'm now convinced there is some thing I am missing as my code works fine on JSfiddle - http://jsfiddle.net/ccsnet/dK7NX/5/
<div id="eventscontent" data-role="content">
<div id="eventlistcontrolsdiv1" align="center" >
<form id="eventlistcontrols" name="eventlistcontrols" class="eventlistcontrols" method="post" action="">
<div id="eventlistbutton" align="center">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" >
<input id="bydistance" type="radio" name="eventsortby" checked="true" />
<label for="bydistance">By Distance</label>
<input id="bytype" type="radio" name="eventsortby" />
<label for="bytype">By Type</label>
<input id="byimpact" type="radio" name="eventsortby" />
<label for="byimpact">By Impact</label>
</fieldset>
</div>
</div>
</form>
</div>
</div>
$(document).ready(function() {
$(function() {
$("input[name='eventsortby']").click(function() {
alert($("input[name=eventsortby]:radio:checked").attr("id"));
})
});
});
What I don't understand is why this should be the case. The only differences are that I have the javascript in a separate file to the html form but I thought I was referencing it correctly. I have tried doing...
input[name=document.eventlistcontrols.eventsortby]
... how ever this did not work either....
Can any one see what I am not doing correctly ?
Thanks
Terran