Again at the start of the function we declare a variable and set it to reference an object; this time it's the Text object created for the txtAge text box that we define further down the page. Now instead of having to type document.form1.txtAge every time we just type txtAge and it acts as the same thing. It certainly helps save those typing fingers, especially since it's a big function with multiple use of the txtAge object.

The following if statement checks to see if what has been entered in the txtAge text box can be converted to a number. We use the isNaN() function to do this for us. If the value in txtAge test box is not a number then it's time to tell the user and set the focus back to the offending element with the focus() method of the corresponding Text object. Additionally, this time we also highlight the text by using the Text object's select() method. It makes it even clearer to the user, and they can rectify the problem without needing to delete text first.

We could go further and check that the number inside the text box is actually a valid age, for example -191 is not a valid age, nor is 255 likely to be. We just need to add another if statement to check for these possibilities, but I'll leave that as an extra exercise!

This function is connected to the onblur event handler of the txtAge text box, but why didn't we use the onchange event handler, with the advantage that we only recheck the value when it's actually been changed? The onchange would not fire in the situation where the box was empty before focus was passed to it, and after focus was passed away from it. However, leaving the checking of the form completion until just before the form is submitted is probably better as some users prefer to fill in information out of order and come back to some form elements later.

The final function is for the txtName text box's onchange event. Its use here is a little flippant, and more as an example of the onchange event.

When the onchange event fires, when focus is passed away form the name text box and its contents have changed, we take the value of the txtName box and put it into the window's status bar at the bottom of the window. It simply says Hi yourname. We access the status bar using the window object's status property. Although we could just put:

I've actually put window in front of this just to make it clear what we are actually accessing. It would be very easy when reading the code to mistake status for a variable, so in this situation, although strictly unnecessary, putting window in front does make the code easier to read, understand, and therefore debug.

The Password Text Box

The only real purpose of the password box is to allow users to type in a password on a page and to have its characters hidden, so that no one can look over their shoulder at it. However, when sent to the server the text in the password is sent as plain text - there is no encryption or attempt at hiding the text - so it's not a secure way of passing information.

Defining a password box is identical to a text box, except that the TYPE attribute is password:

This form element creates an associated Password object, which is almost identical to the Text object in its properties, methods, and events.

The Hidden Text Box

The hidden text box can hold text and numbers just like a normal text box, the difference being that it's not visible to the user. A hidden element? It may sound as useful as an invisible painting, but in fact it proves to be very useful.

To define a hidden text box we have the following HTML:

The hidden text box creates a Hidden object. This is available in the elements array property of the Form object and can be manipulated in JavaScript like any other object. Although it's only through its HTML definition or through JavaScript that we can actually set its value, like a normal text box its value is submitted to the server when the user submits the form.

So why are they useful? Let's imagine we had a lot of information that we need to obtain from the user, but to avoid having a page stuffed full of elements and looking like the control panel of the space shuttle, we decide to obtain the information over more than one page. The problem is how do we keep a note of what was entered in previous pages? Easy - we use hidden text boxes and put the values in there. Then, in the final page, all the information is submitted to the server - it's just that some of it is hidden. Anyway, we'll see more about this in the server-side scripting chapter.