Altering Select Boxes in Forms

…use these to jump around or read it all

OK, so I’m zipping around the Web looking for the answer to a coding question when I came upon a site called “ShowUsYourCode“. I didn’t find the answer I was looking for there, but I did find a lot of other neat stuff.

The scripts on the site were pretty good and I took a couple and reworked and rewrote a few sections in order to make the script easy to incorporate into a Web page. This tutorial is the result of that reworking. 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:

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

<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 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. Moving along…

The Script Code

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

Copy and paste the script from the new window into your HTML document. In between the HEAD tags 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 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, then the form name, then the form element name.

The second variable, “TheOptions” uses the above IntPath but adds the addition 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 zero. Numbers one and two follow right along.

If you click on the “Yes” radio button, the function YesAnswer() runs and the script above are 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 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 out 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 out 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 out 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 out 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.

That’s That

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 his or her choices.

Enjoy!