Results 1 to 2 of 2

Thread: Forcing Focus on Radio Button

  1. #1
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    138
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Question Forcing Focus on Radio Button

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



    Original Effort:
    html

    Code:
    <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
    Code:
    	 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

    Code:
    <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
    Code:
    	 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
    Code:
    <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
    Code:
    	 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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,132
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    document.form.defage[0].focus();
    Although:

    Code:
    document.forms.form.elements.defage[0].focus();
    would be more precise, and:

    Code:
    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):

    Code:
    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:

    Code:
    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.
    Last edited by jscheuer1; 04-22-2013 at 03:24 AM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    marain (04-22-2013)

Similar Threads

  1. Replies: 2
    Last Post: 03-05-2013, 10:52 PM
  2. Button to loose focus after close of popup window
    By ismailc in forum JavaScript
    Replies: 2
    Last Post: 10-21-2009, 02:32 PM
  3. Replies: 2
    Last Post: 03-31-2009, 10:59 AM
  4. Forcing in focus
    By cyberdreamer in forum JavaScript
    Replies: 5
    Last Post: 09-28-2008, 12:18 AM
  5. Replies: 6
    Last Post: 01-21-2008, 06:50 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •