Steven Disbrow is the owner of EGO Systems, a computer consulting firm in Chattanooga, Tennessee. He can be contacted at [email protected].

We examined a JavaScript object for enhancing HTML check boxes in the April 1999 column. ¹ This time, we're going to use these concepts along with some new JavaScript objects to enhance three HTML controls: radio buttons, select lists, and text boxes.

THE oRadio OBJECT
HTML radio buttons are like check boxes that are kept in herds. Radio buttons are organized into "families," and only one radio button in each family can be on at any given time. The main reason to use a JavaScript object with a radio button family is to simplify the management of multiple radio buttons and/or families. In fact, a single JavaScript radio button object is all you need to manage an entire family of radio buttons no matter how many buttons are in the family. For example, if you have 100 radio buttons organized into two families of 50 buttons each, you would only need two JavaScript objects to manage all 100 buttons!

Of course, this JavaScript object is a bit more complex than what we saw last time. (Listing 1 shows the complete source code for the oRadio object.—all listings from this article are available at Java Report Online only.) If you look at the constructor function, you'll see that, as with our check box object, we have two instance variables, "form" and "name," to keep track of the form our control is on and the name of the control. After that, we have six methods for working with our radio button control.

The first method, getLength, is simple enough. It tells us how many radio buttons are in our family simply by reading the length property that is built into every radio button family. We use the eval method to actually execute the statement that gets the length for us. (see June installment for further details.²)

The getSelected method tells us the index of the currently selected radio button in our radio family. Because radio button families are treated as arrays by JavaScript, all we have to do is loop through that array and look at the checked property of each radio button. If checked is true, we've found the selected button. (The setSelected method is pretty much the reverse. You specify the index of the radio button you want selected, and its checked property is set to true.)

The next two methods, channelUp and channelDown, use the getSelected and setSelected methods to let you cycle through a family of radio buttons just as you would the channels on a television.

Finally, the getValue method returns the value attribute that is associated with the currently selected radio button.

Looking at the code in Listing 1, you might notice that in the "onClick" handler for each button, we are using the setTimeout method (with a delay of zero milliseconds) to make the actual call to the method for our oRadio object. This is because, in some versions of JavaScript, you cannot call a method directly from an onClick handler. However, you can call setTimeout, and it has no problem at all calling a method. (Of course, setTimeout is itself a method belonging to the window object, so this problem appears only to affect the methods of user-created objects.)

THE oSelect OBJECT
Another common HTML control that can benefit from JavaScript is the selection list. Like radio buttons, JavaScript treats selection lists as if they were arrays, so much of the same code can be used here. Listing 2 contains the source code that defines our oSelect object.

The constructor function should look very familiar and in fact, most of the methods are similar in both name and function to those found in the oRadio object. For example, the getLength method is almost the same. The main difference here is that we must access the options array that is built into every selection list in order to get our information. (This trend continues through most of the oSelect object methods.)

One difference between radio buttons and select lists is that select lists have a selectedIndex property that will tell you exactly which item in the select list is selected. This comes in very handy for the oSelect getSelected method, but it's completely useless for the setSelected method. Unfortunately, you can't change the item selected just by assigning a new value to the selectedIndex property. Instead, you have to assign a true to the selected property of the item you want selected.

One final difference between radio buttons and select lists is that each item in a select list has both a value and a string of text associated with it. The value is a bit of internal information for that list item and the text is what is actually displayed to the user. Both are simple properties, so the getText method is very similar to the getValue method. The only difference is that instead of retrieving the value property, we retrieve the text property.

THE oText OBJECT
So far, most of the "enhancements" we've looked at have been for ease-of-programming. They really haven't added any new abilities to our HTML controls. This last example does.

One of the most common uses for JavaScript is to validate data on a form before submitting it to the server. By combining a simple JavaScript object with HTML text boxes (or text areas), we can build validation rules right into our text boxes. The source code for just such a thing is shown in Listing 3. As you can see, the constructor for this object is a bit more complicated than others we've seen.

The first few lines are simple enough: We define three instance variables and three methods. The first two instance variables are our standard form and name variables. The third, dataType, is used to track what type of data we want to allow in this text box. This is set by the tType parameter that we pass to the constructor function.

After we define our methods, we actually define another instance variable, validChars. This variable will hold a list of characters that we want to allow in this text box. In addition to the three pre-defined sets of characters ("alpha," "num," and "hex"), you can specify additional valid characters by passing them in the moreValidChars parameter. Note that the different type codes ["hexType," etc.] are defined as "constants" elsewhere in the source code.

So, let's look at the isValid method and see how it makes use of validChars to check the contents of a text box. As you can see, this is actually pretty simple. First, we make sure that we should in fact do any checking at all by comparing our data type with the anyText constant. If any text is allowed, we simply return true to the caller. Otherwise, we get the text from our control using the getText method [which, along with the setText method is, hopefully, easily understandable at this point] and, using a for loop, check each character of the text to see if it can be found in our list of valid characters. If a character can't be found, we present the user with a dialog saying that what they have typed is invalid and we then set the focus to the field in question.

The last thing we need to discuss is the way these methods are invoked. Looking at the HTML for the "Enter an Integer String:" text box, you can see that this text box has an "onChange" handler that calls the isValid method for this text box object when the value in the text box changes. (You might also want to check each box inside an "onSubmit" event handler.) That's all there is to it!

REALLY, THAT'S IT!
Hopefully, this series of installments have convinced you that creating your own JavaScript objects is easy and, more importantly, a very useful skill to have. With just a bit of imagination, you can use these same techniques to make your HTML pages much more versatile. If you come up with any groovy new uses for JavaScript objects on the HTML page, let me know!

References

1. Disbrow, S., "Your own private Idaho()," Java Report, Vol. 4, No. 4, Apr. 1999, pp. 66-69.
   
   
2. Disbrow, S., "Linking JavaScript objects with HTML controls," Java Report, Vol. 4, No. 7, July 1999, pp. 48-54.