Textareas, Checkboxes and Radio Buttons

How It Works

Let's first look at the body of the page, where we define the checkboxes, radio buttons and standard button inside a form called form1. We start with the checkboxes. They are put into a table simply for formatting purposes. No functions are called or events are hooked into.

Next come the radio buttons for selecting the required CPU speed, which are a little more complex. Again they are put into a table for formatting purposes.

The radio button group name is radCPUSpeed. I've set the first one to be checked by default by including the word CHECKED inside the <input> tag's definition. It's a good idea to ensure that you have one radio button checked by default. Without this, if the user did not select a button, the form would be submitted with no value for that radio group.

We're making use of the onclick event of each Radio object. For each button we're connecting to the same function, radCPUSpeed_onclick(), but for each radio button we are passing a value, the index of that particular button in the radCPUSpeed radio button group array. This makes it easy to work out which radio button was selected. We'll look at this function a little later, but first let's look at the standard button that completes our form.

The first thing we do in the function is declare the returnValue variable and set it to true. We'll be returning this as our return value from the function. In this case the return value is important as it decides whether the radio button remains checked as a result of the user clicking it. If we return false then that cancels the user’s action and the radio button remains unchecked. In fact no radio button becomes checked, which is why we keep track of the index of the checked radio button so we can check the previously checked button. To allow the user’s action to go ahead we return true.

As an example of this in action, on the next line we have an if statement. If the radio button's index value passed is 1, that is the user checked the box for a 1 GHz processor, then we tell them that it's out of stock and cancel the clicking action by setting returnValue to false.

I mentioned above that canceling the clicking action results in no radio buttons being checked, so to rectify this we set the previously checked box to be checked again in the line:

What we are doing here is using the Array object for the radCpuSpeed radio group. Each array element actually contains an object, namely each of our three Radio objects. We use the radCpuSpeedIndex variable as the index of the Radio object that was last checked, since this is what it holds.

Finally in the else statement we set radCpuSpeedIndex to the new checked radio button's index value.

In the last line of the function the value of returnValue is returned to where the function was called and will either cancel or allow the clicking action. return returnValue; }

Our second function, butCheck_onclick(), is the one connected to the button's onclick event. In a real e-commerce situation this button would be the place where we'd check our form and then submit it to the server for processing. Here we use the form to show a message box confirming which boxes you have checked, as if you didn't already know!

At the top we declare the four local variables, which will be used in the function. Variable numberOfControls is set to the form's length property, which is the number of elements on the form. Variable compSpec is be used to build up the string that we'll display in a message box.

In the line:

we add the value of the radio button the user has selected to our message string. The global variable radCpuSpeedIndex, which was set by the radio button group's onclick event, contains the array index of the selected radio button.

An alternative way of finding out which radio button was clicked would be to loop through the radio button group's array and test each radio button in turn to see if it was checked. The code would look something like:

Anyway back to the actual code. You'll notice I've thrown in a few new line (\n) characters into the message string for formatting reasons.

Next we have our big for statement.

It's here that we loop through each element on the form using document.form1[controlIndex], which returns a reference to the element object stored at the controlIndex index position.

You'll see that I've set the element variable to reference the object stored in the form1[] array at the index position stored in variable controlIndex. Again this is for convenient shorthand purposes, as now to use that particular object's properties or methods, we just type element and dot and then the method or property name, making our code easier to read and debug, and saving on typing.

We only want to see which check boxes have been checked, so we use the type property, which every HTML element object has, to see what element type we are dealing with. If the type is checkbox then we go ahead and see if it's a checked checkbox. If this is so, we append its value to the message string in compSpec. If it is not a checkbox, it can be safely ignored.

The final thing to do is use the alert() method to display the contents of our message string.