I'm using a form to get information from the user, and i am also using some radio buttons and textarea's, if the user hasn't picked an option from the radio buttons i want to focus that radio button so the user can know what data is missing. I've tried:

document.FORM.RADIOBUTTON[INDEX].focus();

and it actually works well in google chrome, but for some reason it doesn't work on firefox, i tried to use a setTimeout(.....); and again, it does work on google chrome but i don't get anything in firefox. any ideas in how to get this to work?

I'm using a form to get information from the user, and i am also using some radio buttons and textarea's, if the user hasn't picked an option from the radio buttons i want to focus that radio button so the user can know what data is missing. I've tried:

document.FORM.RADIOBUTTON[INDEX].focus();

and it actually works well in google chrome, but for some reason it doesn't work on firefox, i tried to use a setTimeout(.....); and again, it does work on google chrome but i don't get anything in firefox. any ideas in how to get this to work?

• javascript
• firefox
• radio-button
• setfocus

Share Improve this question Follow asked Oct 25, 2011 at 23:17 Slacker616Slacker616 85511 gold badge1111 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

It indeed works in firefox but the issue is the focused item is not highlighted in firefox. If you try to navigate the next DOM element using tab key, you will find it works. Some styling can be applied to element but DOM element styling also differ from browser to browser. See an example here http://jsfiddle/uQ3vk/

Without seeing your HTML the best option I can suggest is to give your radio buttons (or at least the one(s) you want to be able to focus programmatically) an ID:

<input type="radio" id="radio1" name="someradiogroup" value="somevalue">
<input type="radio" id="radio2" name="someradiogroup" value="someothervalue">

<script>
document.getElementById("radio1").focus();
</script>

As with any programmatic access to DOM elements your code won't work if the element(s) haven't been parsed yet, so the code should be either in the document.ready / onload handler or later in the source than the element(s) in question. (Or in a submit handler, assuming a submit won't happen before the page loads.)

I think the missing outline in Firefox is the issue, I know it was for me. I added some CSS and got it to show.

input:focus 
{
  outline:#000 dotted 1px; 
}    
select:focus
{
  outline:#000 dotted 1px; 
}