WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (4/8)

[previous] [next]

Beyond HTML Goodies, chapter 6

Select Boxes: If This . . . Then This

Okay, so I'm zipping around the Web looking for the answer to a coding question. I didn't find the answer I was looking for there, but I did find a lot of other neat stuff.

You can find this tutorial, and all of its examples, online at https://www.htmlgoodies.com/tutors/ifthis.html.

You can download just the examples at https://www.htmlgoodies.com/wpg/.

The scripts I found on the sites I viewed were pretty good, so I took a couple of ideas in order to make an easy to incorporate script in to a Web page. Now, in order to see the effect, you have to be running Internet Explorer 5.0 or better or a later version of Netscape. Dig this.

Figure 6.5 shows the form set before anything was done to it. No choices were made yet.

The form before any choices are made Figure 6.5
Looks like a normal form . . .

Figure 6.6 shows the same form after the Yes answer was chosen. Note that the choices in the select box have changed.

After selecting 'Yes,' the select box choices change Figure 6.6
It's the hair, isn't it?

Figure 6.7 shows how choosing No just pushes the user along. But then, who doesn't like Barry? I do.

After selecting 'No,' the user moves on Figure 6.7
Oh, just go on. You'll learn to love him!

Cool, huh? I only have the effect running on one select box at the moment, but I think you can see the advantage of the effect. How many times have you run into a static form that asked questions that didn't apply? Now you can create a form that will react to the user's responses. Depending on what the user enters, you can grab more information or simply tell the user to move on to the next question.

The Form Code

Here is the basic code:

<FORM NAME="joe">
<b>Do You Like Barry Manilow?</b>
<INPUT TYPE="radio" NAME="zork" 
       VALUE="yes" onClick="YesAnswer()"> Yes
<INPUT TYPE="radio" NAME="zork" 
       VALUE="no" onClick="NoAnswer()"> No
<b>Why? </b> <SELECT NAME="burns">
<OPTION SELECTED> Waiting for response from above
</SELECT>
</FORM>

The form is named "joe". The radio buttons are both named "zork" so that no matter which is chosen, the effect will trigger. The select box is named "burns". I often name form elements with my own name. It just helps me remember the element names without having to go back and look again and again. (That doesn't explain the "zork" though, does it?)

The form is very basic except that the select box only has one element. The reason is that more would be silly. I'm going to change the content no matter which button the user chooses, so why go on and add multiple responses?

Notice that if the Yes radio button is clicked, YesAnswer() is triggered. If the No button is clicked, NoAnswer() is triggered. OK! We're done here. We're moving along . . .

The Script Code

The script code is a little lengthy, but stay with me here. You'll note that it's just the same thing again and again. Most scripts are like that.

<'SCRIPT LANGUAGE="JavaScript">
function YesAnswer()
{
var IntPath = document.joe.burns;
var TheOptions = IntPath.options.length;
document.joe.burns.options.length = 0; 
IntPath.options[IntPath.options.length] = new Option('His Hair is Cool','0');
IntPath.options[IntPath.options.length] = new Option('I am taken away by his dreamy Vocals','1');
IntPath.options[IntPath.options.length] = new Option('He commands me to like him','2');
}
function NoAnswer()
{
var IntPath = document.joe.burns;
var TheOptions = IntPath.options.length;
document.joe.burns.options.length = 0; 
IntPath.options[IntPath.options.length] = new Option ('No Need to Answer. Go On. ','0');
}
</SCRIPT>

Place the script from the new window into your HTML document. In between the HEAD flags is best, but it'll basically run from anywhere as long as it sits above the form in the document. That's a Netscape thing.

Notice that the script is in two sections. The first is a function for YesAnswer(), and the second is a function for NoAnswer(). Can you see it all coming together now?

I've set two variables:

var IntPath = document.joe.burns;
var TheOptions = IntPath.options.length;

The first, IntPath represents the initial path to the select box. It follows the path document, and then the form name, and then the form element name.

The second variable, TheOptions uses the IntPath but also adds the additional directions options (the elements in the select box) and length (the number of options in the select box).

The next line reads

document.joe.burns.options.length = 0;

This line's only purpose is to clear what is currently written in the select box so that new text can be written. If we didn't have this, the new text would simply be written under the existing text. That would be rather confusing, don't you think? Well, now that we've blanked the select box, we might as well write something in there:

IntPath.options[IntPath.options.length] = new Option('His Hair is Cool','0');
IntPath.options[IntPath.options.length] = new Option('I am taken away by his dreamy Vocals','1');
IntPath.options[IntPath.options.length] = new Option('He commands me to like him','2');

If you simply keep in mind what IntPath represents (document.joe.burns), this reads pretty easily. In the select box's options, write this new option. Then you receive the text for the new option and the option's array number. Remember that JavaScript starts counting at zero, not one. That's why the first new option's number is 0. Numbers 1 and 2 follow right along.

If you click on the Yes radio button, the function YesAnswer() runs and the preceding script is enacted. If you click the No button, the NoAnswer() function triggers and the same process runs, yet only one option is entered in the box. That option's sole purpose is to tell the user to go on to the next question, so only one option is needed.

Multiple Form Elements

Because most forms do not have a single drop-down box like this one, you'll need to know how to alter this script if you have multiple form elements. My suggestion is to not get overly fancy with the coding. Create a new set of functions for each form/select box grouping you create.

That means a simple copy and paste, but be careful, you'll need to change a few things. For one, the form elements will have new names, so you'll have to change not only the name of the function, but also the name of the select box in the script.

So . . .

Change the name of the function in the form element itself so that each radio button grouping triggers a function built specifically for its purpose. That means you'll have to change the name both in the script (when you paste in a new function) and in the form itself.

In the script, you'll need to change the name of the select box element. That means everywhere you see burns (the name of the current select box), you'll need to change the name to the new select box.

It'll create a lot of text, that's for sure, but you'll be able to keep it all straight if you follow this format.

Using this script format can make a great form that will actually interact with the user rather than bothering the user by asking questions that shouldn't be answered. I'm not a fan of surveys that read, "If yes, go here--If no, go here." Using this script, you can alter the questions and answers as the user makes her choices.