How It Works (Con't) - Page 16

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.

   if (radIndex == 1)
   {
      returnValue = false;
      alert("Sorry that processor speed is currently unavailable");
      document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true;
   }

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:

document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true;

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.

   else
   {
      radCpuSpeedIndex = radIndex;
   }

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.

function butCheck_onclick()
{
   var controlIndex;
   var element;
   var numberOfControls = document.form1.length;
   var compSpec = "Your chosen processor speed is ";
   compSpec = compSpec +
     document.form1.radCPUSpeed[radCpuSpeedIndex].value;
   compSpec = compSpec + "\nWith the following addtional components\n";

[The red lines above are one line. They have been split for formatting purposes.]

In the line:

compSpec = compSpec +
 document.form1.radCPUSpeed[radCpuSpeedIndex].value;

[The lines above are one line. They have been split for formatting purposes.]

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:

var radIndex;
for (radIndex = 0; radIndex
< document.form1.radCPUSpeed.length; radIndex++)
{
   if (document.form1.radCPUSpeed[radIndex].checked == true)
   {
      radCpuSpeedIndex = radIndex;
      break;
   }
}

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.

for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++)
   {
      element = document.form1[controlIndex];
      if (element.type == "checkbox")
      {
         if (element.checked == true)
         {
            compSpec = compSpec + element.value + "\n";
         }
      }
   }
   alert(compSpec);
}

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.

How It Works - Page 15
Beginning JavaScript