Forcing Focus on Radio Button

[marain]

I'm having difficulty forcing focus upon a radio field element. Here are the techniques I've tried, all unsuccessfully:



Original Effort:
html


<tr>
<td class="prompt">Age of person charged:</td>
<td class="input">
under 18 <input type="radio" name="defage" value="u18" />&nbsp; &nbsp; &nbsp;
18-21 <input type="radio" name="defage" value="18-21" />&nbsp; &nbsp; &nbsp;
22-30 <input type="radio" name="defage" value="22-30" />&nbsp; &nbsp; &nbsp;
over 30 <input type="radio" name="defage" value="o30" /></td>
</tr>


javascript

var chosen = checkOne( "defage" )
if ( chosen < 0 ) {
alert( "Please make your selection at Age of person charged." );
document.form.defage.focus();
return false;
}




Modification One: Add name to prompt element
html


<tr>
<td class="prompt" name="pdefage">Age of person charged:</td>
<td class="input">
under 18 <input type="radio" name="defage" value="u18" />&nbsp; &nbsp; &nbsp;
18-21 <input type="radio" name="defage" value="18-21" />&nbsp; &nbsp; &nbsp;
22-30 <input type="radio" name="defage" value="22-30" />&nbsp; &nbsp; &nbsp;
over 30 <input type="radio" name="defage" value="o30" /></td>
</tr>


javascript

var chosen = checkOne( "defage" )
if ( chosen < 0 ) {
alert( "Please make your selection at Age of person charged." );
document.form.pdefage.focus();
return false;
}








Modification Two: Insert hidden field


html

<tr>
<td class="prompt">Age of person charged:</td>
<td <input type="hidden" name="hdefage">
<td class="input">
under 18 <input type="radio" name="defage" value="u18" />&nbsp; &nbsp; &nbsp;
18-21 <input type="radio" name="defage" value="18-21" />&nbsp; &nbsp; &nbsp;
22-30 <input type="radio" name="defage" value="22-30" />&nbsp; &nbsp; &nbsp;
over 30 <input type="radio" name="defage" value="o30" /></td>
</tr>


javascript

var chosen = checkOne( "defage" )
if ( chosen < 0 ) {
alert( "Please make your selection at Age of person charged." );
document.form.hdefage.focus();
return false;
}


Wherefore the error of my ways?

A.

[jscheuer1]

In the first attempt, you cannot focus on a collection of elements. There are four document.form.defage, so assuming that the form is correctly defined earlier in the code, that's a collection. you could probably focus on the first one with:


document.form.defage[0].focus();

Although:


document.forms.form.elements.defage[0].focus();

would be more precise, and:


document.forms.form.getElementsByName('defage')[0].focus();

is what I'd probably do.

Or even just (assuming there are no other defage elements above those on the page):


document.getElementsByName('defage')[0].focus();

The other two attempts fail because neither a td nor a hidden element may receive focus. And a td cannot be accessed via its parent form anyway, not as a member of that form's form elements as you have it there. Only unhidden, enabled form elements may receive focus that way.

You cannot focus on anything other than a form element, or an a link tag (some browsers allow frames - the frames on a frameset page (not a fieldset in a form, that's not a true form element), iframes and/or windows as well, but that's not universal). Whatever it is, it has to be visible or capable of being seen when focused on, and it has to be referenced in a unique manner - has to be the only one on the page (or in the case of frames and windows, the only item in the windows collection) that qualifies - only one thing can be focused on at a time.

So I'd go with:


document.getElementsByName('defage')[0].focus();

If on the other hand you don't want to focus on any particular radio, rather draw attention to the radio group and scroll it into view if it isn't currently in view, that can be done, but it wouldn't involve focus.

However, focusing on the first radio should accomplish that and is the easiest method as long as you don't mind the first one receiving focus.


If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.