How It Works - Page 10

Within the body of the page, we create the HTML tags that define our form. Inside our form, which is called form1, we create the three form elements with names txtName, txtAge, and butCheckForm.

<FORM NAME=form1>
   Please enter the following details:
   <P>
   Name:
   <BR>
   <INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
   <BR>
   Age:
   <BR>
   <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()" SIZE=3 MAXLENGTH=3>
   <BR>
   <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm 
      onclick="butCheckForm_onclick()">
</FORM>

You'll see that for the second text box, that is the txtAge text box, we have included the SIZE and MAXLENGTH attributes inside the <INPUT> tag. Setting the SIZE attribute to 3 gives the user an idea of how much text we are expecting, and setting the MAXLENGTH attribute to 3 helps ensure that we don't get too large numbers entered for our age value!

The first text box's onchange event handler is connected to the function txtName_onchange(), the second text box's onblur event handler is connected to the function txtAge_onblur(), and the button's onclick event handler is connected to the function butCheckForm_onclick(). These functions are defined in a script block in the head of the page. We will look at each of them in turn, starting with butCheckForm_onclick().

The first thing we do is define a variable, myForm, and set it to reference the Form object created by our <FORM> tag later in the page.

function butCheckForm_onclick() 
{
   var myForm = document.form1;

Doing this reduces the size of our code each time we want to use the form1 object. Instead of document.form1 we can just type myForm. It makes our code a bit more readable and therefore easier to debug, and it saves typing. When we set a variable to be equal to an existing object, we don't (in this case) actually create a new form1 object. Instead we just point our variable to the existing form1 object. So when we type myForm.name JavaScript checks our variable, finds it's actually storing the location in memory of the object form1 and uses that object instead. All this goes on behind the scenes so we don't need to worry about it and can just use myForm as if it was document.form1.

Having got our reference to the Form object, we then use it in an if statement to check whether the value in the text box named txtAge or the text box named txtName actually contains any text.

   if (myForm.txtAge.value == "" || myForm.txtName.value == "")
   {
      alert("Please complete all the form");
      if (myForm.txtName.value == "")
      {
         myForm.txtName.focus();
      }
      else
      {
         myForm.txtAge.focus();
      }
   }

If we do find an incomplete form, we alert the user. Then in an inner if statement we check which text box was not filled in. We set the focus to the offending text box, so that the user can start filling it in straight away without having to move the focus to it themselves. It also lets the user know which text box our program considers needs filling in. To avoid annoying your users, make sure that text in the page tells them which fields are required.

If the original outer if statement found that the form was complete, then it would let the user know with a thank you message.

   else
   {
      alert("Thanks for completing the form " + myForm.txtName.value);
   }
}

In this sort of situation, it's probably more likely that at this point, having validated the form, we'd submit it to the server for processing. We can do this using the Form object's submit() method as we'll see in the chapters on server-side programming.

The next of our three functions is txtAge_onblur(), which is connected to the onblur event of our txtAge text box. The purpose of this function is to check that the string value the user entered into the age box actually consists of number characters.

function txtAge_onblur()
{
   var txtAge = document.form1.txtAge;

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.

   if (isNaN(txtAge.value) == true)
   {
      alert("Please enter a valid age");
      txtAge.focus();
      txtAge.select();
   }
}

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.

function txtName_onchange() 
{
   window.status = "Hi " + document.form1.txtName.value;
}

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:

   status = "Hi " + document.form1.txtName.value;

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.

Try It Out: A Simple Form with Validation - Page 9
Beginning JavaScript
The Password Text Box - Page 11