Learn how to set up a form so that after the user fills in a pre-determined number of characters, the cursor jumps to the next form element all by itself.

This has been a tutorial that's been sitting in my "working" directory for quite some time. My "working" file is place where I have little blips of code that could, at sometime or another, become a tutorial. Most of the pieces of code don't work. That's why they're in a working directory.

This concept always seemed like something that I could do, but I could never quite get it until I posted the code to the HTML Goodies Discussion groups. Thanks to Jim Young for helping. He reposted a code he created for a client that got the same effect I'll show you here. I didn't use his full code, just the one missing piece that I needed. Thank you Jim - you're a gentleman.

The Effect

I am often asked how to set up a form so that after the user fills in a pre-determined number of characters, the cursor jumps to the next form element all by itself.

Please understand that this only works with browsers version 4.0 and above. I'll tell you why in a moment. But don't let that stop you from installing this on your forms. Lower version browsers will not understand the Event Handler command and will not trigger the functions. That means no errors. Those that have browsers version 4.0 or higher get the effect, those who don't just fill in the form as they normally would.

Here's an example with four text boxes:

The Form Elements

<FORM NAME="joe">
<INPUT TYPE="text" name="burns" size="10" onKeyUp="check()"><BR>
<INPUT TYPE="text" name="tammy" size="10" onKeyUp="check2()"><BR>
<INPUT TYPE="text" name="chloe" size="10" onKeyUp="check3()"><BR>
<INPUT TYPE="text" name="mardi" size="10" onKeyUp="check4()"><BR>
<INPUT TYPE="submit" VALUE="Click to Send" NAME="go">
</FORM>

This is a basic form. The name of the form is "joe".

After that, four text boxes. Each box is given a name, a size, a maximum length, and is finally attached to a function triggered to work using the onKeyUp Event Handler.

This is why the script only works in version 4.0 or better browsers. That onKeyUp Event Handler is a relatively new command. This is where I ran into nothing but trouble. You see, the script must be set up so that every time someone enters a new character into a text box, the function must run in order to recount the number of characters the user has entered.

I tried everything - I mean everything. I went with onFocus, onClick, I tried setting the function to a "for" loop and a "while" loop. I set up a setTimeout() function. Nothing worked. As soon as I put in the onKeyUp, success. Each time a key is released, the function runs.

So easy, yet so hard to find.

Now that we know the names of all of the form elements, we can start to build some JavaScript hierarchy statements. For example, the first text box can be called upon through the statement document.joe.burns.

Furthermore, the number of characters within the first text box can be returned through the hierarchy statement document.joe.burns.value.

With those two concepts, the scripts basically build themselves.

Getting the First Focus

You may have noticed that when you arrived at this page, the first text box already had the cursor blinking away. That didn't just happen by default. I needed to "force" focus to the first text box. I did it in the BODY flag like so:

<BODY BGCOLOR="ffffff" onLoad="document.joe.burns.focus()">

It's that focus() that does the trick. By attaching it to the end of a hierarchy statement, it puts focus upon the form element. In this case, the first text box (burns) under the form (joe).

Keep that concept in mind, we'll do it again and again throughout the four functions.

From Box One to Box Two

The first two text boxes are named "burns" and "tammy". You just learned that if you then attach focus() to the end of the hierarchy statement, you can set focus upon the form element. Let' put those two concepts to work.

The text box "burns" has its onKeyUp Event Handler set to a function named check(). It looks like this:

function check()
{
var letters = document.joe.burns.value.length +1;
if (letters <= 4)
{document.joe.burns.focus()}
else
{document.joe.tammy.focus()}
}

The function first sets the number of characters found within the first textbox (burns) to a variable and then adds one. The onKeyUp Event Handler is the trick. It forces the function to run every time something is entered.

Next, an If statement asks if the number characters within the text box "burns" is less-than or equal to four. If so, then focus remains upon the textbox "burns".

We want the effect to allow four letters to appear in the text box. To get that effect, we add one to the number of characters found in the box. That way, one equals two, two equals three, etc., etc. Once you put in the fourth letter, the If statement is no longer true. Yes, you could get the same effect by not adding one and setting all the numbers up one, but that gets confusing. By adding one, you can set the If statement to the number of letters you want to appear in the box. It's much easier to follow.

Once the If statement is no longer true ("letters" now equals five but only four letters are in the box), focus jumps to the next box, "tammy".

Now that focus is upon "tammy", the function check2() is not the one that runs each time a key is let up. See that in the form elements? The textbox "tammy" has onKeyUp set to check2().

The function looks like this:

function check2()
{
var letters2 = document.joe.tammy.value.length +1;
if (letters2 <= 4)
{document.joe.tammy.focus()}
else
{document.joe.chloe.focus()}
}

Does it look familiar? It should. It's the exact same format as before except for:

The function name has changed from check() to check2()
The variable name letters has been changed to letters2
The hierarchy statements are now set to jump from textbox 2 to 3.

The reason for the changes is that you cannot have the same variable names used twice to represent two different values within the same script.

Once focus is upon textbox three, "chloe", the function check3() takes over and performs the same tasks.

Once focus is upon the fourth textbox, "mardi", the function check4() takes over and does the same thing, except this time when four letters are entered, focus will jump to the submit button.

Don't expect the submit button to do anything. It won't.

Got it?

Do you see how the functions work? Each is doing the exact same thing. You just have to change out some variable names so that you won't get JavaScript errors.

Now, what about getting the form to submit when the user finishes the last box?

Submitting onFocus

Right up front, let me tell you a couple of drawbacks to using this:

If the user doesn't fill out the form in order, this might submit an unfinished form.
The effect STINKS if you use a simple mailto: to submit your form. It's not so bad if you submit to a CGI.

Step One: Add an ACTION="--" attribute to your main FORM flag. Like so:

<FORM NAME="joe" ACTION="/Goodies/cgi-bin/form.pl">

Step Two: Lose the submit button altogether.

Step Three: in the final function, set the final focus to:

document.joe.submit()

That will trigger the form to submit just as if you clicked the submit button. Again, if you're using a simple mailto: format, there are only about 100 things that can go wrong. It may not be too bad if you're attaching your form to a CGI.

That's That

This is a great effect that will help your viewers along when filling out your form elements. Remember that you can set the functions to look for any number of characters. Just be sure to set the numbers correctly.

Enjoy!

So You Want Interactive Form Elements, Huh?

The Form Elements

Getting the First Focus

From Box One to Box Two

Submitting onFocus

That's That