Jump Focus with Form Elements
WEBINAR: On-demand Event
Replace Oracle with the NoSQL Engagement Database: Why and how leading companies are making the switch REGISTER >
[Getting the First Focus]
[From Box One to Box Two]
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.
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.
Here's an example with four text boxes:
The Full Code
Here's where I often catch heck from experienced programmers. Much of the code I offer on HTML Goodies is wordy. Before you write to tell me, yes, I know this can be done with a single function. In fact, Jim's code was a single function. The code I am offering here breaks out each function individually.
I only do that because it makes the code simpler and allows a less-experienced programmer to grasp the concept. That's all...
OK! Let's look at the full source code for the effect. I have it here in text format. The bold text tells what each section does. You can copy and paste it straight away if you'd like. I have commented out the descriptive text.
Each function can be changed around to your heart's content allowing as many or as few letters as you'd like.
BTW - I tried this with other form elements (radio buttons, check boxes, Select boxes). The effect works. The form element becomes highlighted, but that's it. The user then has to use their mouse to complete the task. That's not at all a bad thing, I just wanted to make you aware of it.
BTW again - I also tried to have the last form element jump to the submit button to automatically submit the form. No dice. There is a method of doing it without using a submit button and I'll quickly tell you how it's done at the end of the tutorial.
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">
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.
Furthermore, the number of characters within the first text box can be returned through the hierarchy statement document.joe.burns.value.
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 tag like so:
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).
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:
var letters = document.joe.burns.value.length +1;
if (letters <= 4)
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:
var letters2 = document.joe.tammy.value.length +1;
if (letters2 <= 4)
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.
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 tag. Like so:
Step Two: Lose the submit button altogether.
Step Three: in the final function, set the final focus to:
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.
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.
[The Form Elements]
[Getting the First Focus]
[From Box One to Box Two]