How to focus on a text input?

C

Csaba

I'd like to have the cursor in the login form's username input text
field when users load the login page.
It works fine with the following implementation:
<body onload="document.login.username.focus();">
<form name="login" method="post" action="<?=$PHP_SELF?>">
<input type="text" name="username" onLoad="self.focus();">

The problem is that the input field's name cannot be simly "username",
because it posts an element of an array, therefore the name is
"upd[username]".

Unfortunately when the above implementation is modified according to
the input field's name, I receive a script error.
<body onload="document.login.upd[username].focus();">
<form name="login" method="post" action="<?=$PHP_SELF?>">
<input type="text" name="upd[username]"
onLoad="self.focus();">

I assume I'd need to escape 'upd[username]' on the 'body onload' line
somehow, but I don't know how.

Please help.

Thank you,

Chuck
 
C

Csaba

Thank you for your quick response. Unfortunately it does not work for
some reason in IE 5.5 and 6.0
The javascript error is: 'upd' is undefined

Do you have any other suggestion?

Thanks again,
Chuck

Csaba said:
I'd like to have the cursor in the login form's username input text
field when users load the login page.
It works fine with the following implementation:
<body onload="document.login.username.focus();">
<form name="login" method="post" action="<?=$PHP_SELF?>">
<input type="text" name="username" onLoad="self.focus();">

The problem is that the input field's name cannot be simly "username",
because it posts an element of an array, therefore the name is
"upd[username]".

Unfortunately when the above implementation is modified according to
the input field's name, I receive a script error.
<body onload="document.login.upd[username].focus();">
<form name="login" method="post" action="<?=$PHP_SELF?>">
<input type="text" name="upd[username]"
onLoad="self.focus();">

I assume I'd need to escape 'upd[username]' on the 'body onload' line
somehow, but I don't know how.

Please help.
Thank you,
Chuck
Click to expand...

How about:

<body onload="document.login.elements[upd[username]].focus();">
Click to expand...
 
C

Csaba Gabor

I think this is what you're looking for, try it out for size:

<html><head><title>Array input elem test page</title></head>
<?php $inputName="upd[username]"; ?>
<body onload="document.login['<?php print $inputName ?>'].focus();">
<form name="login" method="post"
action="<?php print $_SERVER['PHP_SELF']; ?>">
<input type="text" name="<?php print $inputName ?>"><br>
<?php print "input was: {$_POST['upd']['username']}" ?>
</body>
</html>

Csaba Gábor from Budapest
PS. Are you Chuck or Csaba? It was disconcerting
to see someone with my name posting something I
didn't remember posting.
 
C

Csaba

Thanks both of you for the answers. Both methods work fine.

P.S. for Csaba: I'm Csaba too, it is just to hard to remember for most
people, so almost everybody calls me Chuck.
 
T

Thomas 'PointedEars' Lahn

mscir said:
var upd=new Array('username1','username2','username3');
var username=1;
function show(){
alert(upd[username]);
}


<body onload="document.login.elements[upd[username]].focus();">

<form name="login">
<input type="button" value="show upd[username]" onclick="show()">
<input type="text" value="test" length=3>
<input type="text" value=test" length=3 name="username2">
</form>
Click to expand...

That code allows for improvement:

- Neither the HTML code nor the references in the script are
standards compliant.
- "text" is the default value for the "type" attribute of
the HTML "input" element and can be safely omitted.
- The script code is error-prone as it is not checked for
references prior to access.
<http://pointedears.de.vu/scripts/test/whatami>
- Globals are used when not necessary, particularly a variable
for the array index is used when not necessary.
- A method is used that operates on hard-coded references
instead on values passed as arguments.
- Last but not least: It does not solve the problem of the OP
which is to have bracket property accessors in script code
where they should not refer to scripting properties but are
part of the element's name (attribute value), a common error
when coding PHP with arrays and client-side J(ava)Script,
possibly described in the FAQ.)

Refactored source code could look like this:

J(ava)Script/ECMAScript:

function focusElement(sForm, sElement)
{
var f, e;
if (document
&& document.forms
&& (f = document.forms[sForm])
&& f.elements
&& (e = f.elements[sElement])
&& e.focus)
{
e.focus();
}
}

HTML:

<body onload="focusElement('login', 'upd[username]')">
...
<form name="login" action="<?=$PHP_SELF?>" method="post" >
<input name="upd[username]">
...
</form>
...
</body>

But it is generally a Bad Thing to focus form elements on load of the
document since it prevents users from scrolling the document, unless
they have a pointing device at their hands.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

"input-group-text" help 7
Make an <input type="text"> input-ready for input 8
Move a Form action="ThatPage.php" to an <input type="??" > inline 1
Script to send email not working 1
How to store data from a sign up form on a website into an sql databse 1
Registration Form 7
Reversing output of user input by using while loop... 2
How to rewrite this to work with IE 1

Members online

Total: 27 (members: 1, guests: 26)
Robots: 514

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top