So You Want Interactive Form Elements, Huh?

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.

     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.

     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:

     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).

     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.

     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:

     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.

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!