[RESOLVED] Form focus placement in code differences

**hhelgen** · 04-22-2009 05:31 PM

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.

**mrhoo** · 04-22-2009 09:54 PM

An element has to exist before you can use it.

**hhelgen** · 04-23-2009 09:50 AM

Thanks, that makes sense for the inline positioning of the script.

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

**Fang** · 04-23-2009 10:46 AM

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();

**hhelgen** · 04-24-2009 03:28 PM

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

Thread: [RESOLVED] Form focus placement in code differences

Thread Tools

Display

Hybrid View

[RESOLVED] Form focus placement in code differences

SOLVED: form focus placement in code differences

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions