/    Sign up×
Community /Pin to ProfileBookmark

Change focus in form question (again)

Copy linkTweet thisAlerts:
Jun 07.2006

Hello,

I searched through the forum, but can’t find a working answer.

Im building a simple form with 3 fields. Now the fields are filled out using a barcode scanner. So what I need to do is… once the first field is filled with 7 digits, change focus to the second field, the the third field.

I’m pretty new to javascript, and the only thing I’ve figured out so far is how to have the first field to be in focus onload ?

Thanks in advance for any help!

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@themartyJun 07.2006 — you need a function that can measure the stringlength of the input field

the length is something you can determine with [b]length[/b]. when it equals 7 use your focus skills ? to go to the next input field

this function you can trigger with an onKeyUp event

with this information and a little bit of googling you should be able to create something i think.
Copy linkTweet thisAlerts:
@paroxMar 01.2007 — This is a late reply but in case someone else is looking for the answer.

I'm a javascript newbie but I made this code and it works for me.

<i>
</i>Broken code removed (See later post)


[b]field[/b] is the field you're checking the length of, most of the time you'll just type [b]this[/b]

[b]newField[/b] is the field you want to focus on once the length is met

[b]length[/b] this is where you set the length of the [b]field[/b] before it will refocus the user.

Here is a working example (just copy it into a blank file and save it as a HTML)
<i>
</i>Broken code removed (See later post)



Enjoy!

Regards, Kane Shaw
Copy linkTweet thisAlerts:
@alexkinkauthorMar 01.2007 — Hi Parox,

I found a solution long time ago, however I tried out your version too. I don't get it to work for some reason though. The fields don't switch

.alex
Copy linkTweet thisAlerts:
@paroxMar 02.2007 — Hi Parox,

I found a solution long time ago, however I tried out your version too. I don't get it to work for some reason though. The fields don't switch

.alex[/QUOTE]


Hi there

Thanks you were right, the code only worked in IE I think.

Anywayz, I have rewritten it with 1 less option to specify and it now should work in other browsers.

<i>
</i>&lt;script language="javascript" type="text/javascript"&gt;
function advance(field, nextField) {
if(field.value.length == field.getAttribute('maxlength')) {
document.getElementsByName(nextField)[0].focus();
}
}
&lt;/script&gt;


[b]field[/b] is the field you're checking the length of, most of the time you'll just type this

[b]nextField[/b] is the field you want to focus on once the maxlength is met

[b]maxLength[/b] The maximum length of a field is specified in the normal HTML way (maxlength="x" in the input field)


Here is a working example, just copy and paste it into a blank HTML file
<i>
</i>&lt;html&gt;&lt;head&gt;
&lt;script language="javascript" type="text/javascript"&gt;
function advance(field, nextField) {
if(field.value.length == field.getAttribute('maxlength')) {
document.getElementsByName(nextField)[0].focus();
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form method="POST" name="testform"&gt;
&lt;table border="0" style="border-collapse: collapse" width="400"&gt;
&lt;tr&gt;
&lt;td height="30" colspan="2"&gt;
&lt;p align="center"&gt;&lt;b&gt;Auto Advance Test&lt;/b&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td height="6" align="right"&gt;Enter 2 characters here&lt;/td&gt;
&lt;td height="6"&gt;
&lt;input onkeyup="advance(this,'test')" type="text" name="field" maxlength="2" size="20"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td height="6" align="right"&gt;Enter 5 characters here&lt;/td&gt;
&lt;td height="3"&gt;
&lt;input onkeyup="advance(this,'another')" type="text" name="test" maxlength="5" size="20"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td height="6" align="right"&gt;Enter 7 characters here&lt;/td&gt;
&lt;td height="8"&gt;
&lt;input onkeyup="advance(this,'almostdone')" type="text" maxlength="7" name="another" size="20"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td height="6" align="right"&gt;Enter 3 characters here&lt;/td&gt;
&lt;td height="8"&gt;
&lt;input onkeyup="advance(this,'lastone')" type="text" maxlength="3" name="almostdone" size="20"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td height="14" align="right"&gt;Enter 1 character here&lt;/td&gt;
&lt;td height="19"&gt;
&lt;input onkeyup="advance(this,'submitbut')" type="text" maxlength="1" name="lastone" size="20"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td height="6" align="right"&gt;
&lt;input type="reset" value="Reset" name="B2"&gt; &lt;/td&gt;
&lt;td height="27"&gt;
&lt;input type="submit" value="Submit" name="submitbut"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


Let me know if anyone finds a problem with it!

Kane
×

Success!

Help @alexkink spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...