www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Form focus placement in code differences

  1. #1
    Join Date
    Mar 2006
    Location
    Duluth, MN
    Posts
    3

    resolved [RESOLVED] Form focus placement in code differences

    Greetings,
    Problem: I would like to understand why javascript works in some locations but not in others.
    Here is my xhtml code for a form that correctly sets focus on the first field - username.
    Code:
    <form id="loginform" action="loginresults.cfm" method="post"> 
    <!--- Accept login credentials and call loginresults.cfm  --->
    	<fieldset id="loginfieldset">
            <label class="loginlabel" for="username" >Username: </label> 
        <input class="loginfield" id="username" type="text" name="UserName" value="" size="8" />
            <label class="loginlabel" for="password">Password: </label> 
        <input class="loginfield" id="password" type="password" name="Password" value="" size="8" />
        <input class="loginfield" id="submit" type="submit" name="B1" value="Login" alt="Login to the database" title="Login to the database"/>
    	</fieldset>
    </form>
    
    <!--- set focus on the first input field --->
    	<script type="text/javascript">
            document.forms[0].username.focus()
        </script>
    But when I move the script code above the form tag, there is no field with focus.

    Also, when I put a function with more generic focus code in the body tag onload, there is no field with focus. This used to work until I upgraded the site to XHTML 1.0 strict with CSS and accessibility.

    Code:
    <head>
    	<script type="text/javascript"> 
    <!--- Set focus on the first form field --->
        function setfocus() {
          if (document.forms.length > 0) {
            document.forms[0].elements[0].focus(); 
            return true;
            }
        }
        </script>
    </head>
    
     <body onload="setfocus()" >
    This is a workable solution, I just want to understand why it works this way and not the others.

  2. #2
    Join Date
    Feb 2006
    Posts
    2,927
    An element has to exist before you can use it.

  3. #3
    Join Date
    Mar 2006
    Location
    Duluth, MN
    Posts
    3
    Thanks, that makes sense for the inline positioning of the script.

    Any insight as to why the body onload would stop working?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This will work
    Code:
    <script type="text/javascript">
    window.onload=function() {
    document.forms[0].UserName.focus();
    };
    </script>
    A fieldset is a form element. This will focus on the fieldset:
    Code:
    document.forms[0].elements[0].focus();
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2006
    Location
    Duluth, MN
    Posts
    3

    SOLVED: form focus placement in code differences

    Thanks. That approach is more generic. It can go in a single included header rather than individual form pages.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles