Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old August 3rd, 2004, 04:06 PM
Authorized User
Join Date: Jun 2003
Posts: 75
Thanks: 0
Thanked 0 Times in 0 Posts
Default Tab Automatically To Next Object on Form


Is there a way to automatically tab to the next object on a form when the text box has data entered that reaches the maximum characters allowed for that text box (using "maxlength")?

I have a phone number group of text boxes and would like the focus to move to the next text box once information is entered into a box.

<input class="in32" name="phonearea" maxlength="5" value="( )">&nbsp
<input class="in32" name="phone1st" maxlength="3"> -
<input class="in40" name="phone2nd" maxlength="4"> x
<input class="in40" name="phoneext" maxlength="5">


Old August 4th, 2004, 03:31 AM
Friend of Wrox
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts

I imagine JavaScript can do this. (Can't help - my JS is lousy.)

Are you sure you want to do this though? What if the user makes a typo and want to correct it and he's typing in the next field before he knows it? I can only speak for myself but I find things like this annoying and often confusing. As an example, maybe I don't fill in the fields in the order you have them but in the order I have them in the program where I store personal data.

Just wanted to warn you against helping the user too much. It can often have the opposite effect.

//\ =^..^=
Old August 4th, 2004, 03:36 AM
Friend of Wrox
Join Date: Jul 2003
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post

Hi Rita,

Meow's is a good point, but if you really want to do it, try this...

function TabAfterMaxLength(pTextBox){
    if(pTextBox.value.length == pTextBox.maxLength){
        var els = pTextBox.form.elements;
        for(var i = 0; i < els.length; i++){
            if(els[i] == pTextBox){
                if(els[i + 1]){
                    els[i + 1].focus();


(<input class="in32" name="phonearea" maxlength="5" onkeyup="TabAfterMaxLength(this);">)&nbsp
<input class="in32" name="phone1st" maxlength="3" onkeyup="TabAfterMaxLength(this);"> -
<input class="in40" name="phone2nd" maxlength="4" onkeyup="TabAfterMaxLength(this);"> x
<input class="in40" name="phoneext" maxlength="5" onkeyup="TabAfterMaxLength(this);">
n.b. I placed your brackets outside the phonearea box as otherwise the tab would be triggered as soon as you enter it.



Old August 4th, 2004, 09:49 AM
Authorized User
Join Date: Jun 2003
Posts: 75
Thanks: 0
Thanked 0 Times in 0 Posts

Thanks for both the responses. Meow certainly has a good point that I never thought about. I'll apply the code and then decide whether to leave it in or not. The form that the code will be in will only be used a couple of times a year so I'll takes that in consideration too.

Similar Threads
Thread Thread Starter Forum Replies Last Post
Automatically update in form Detail section mohiddin52 Access VBA 0 April 18th, 2008 10:36 AM
Enable / Disable Form Fields Automatically jackyam Javascript How-To 10 March 17th, 2008 04:46 AM
Ctrl + TAB in MDI form PypeLine C# 0 February 2nd, 2007 09:10 AM
Multi-Tab form srotondo Classic ASP Professional 1 April 27th, 2006 06:38 PM
automatically submit a form crmpicco Classic ASP Basics 1 March 30th, 2005 09:13 AM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.