HTML Forms : Interacting with the User - Beginning JavaScript - page 246

The second function, btnCheck_onclick(), is connected to the button's onclick event. In a real
e-commerce situation, this button would be the place where you'd check your form and then submit it
to the server for processing. Here you use the form to show a message box confi rming which boxes you
have checked (as if you didn't already know)!
At the top you declare four local variables to use in the function. The variable numberOfControls is set
to the form's length property, which is the number of elements on the form. The variable compSpec is
used to build the string that you'll display in a message box.
function btnCheck_onclick()
{
var controlIndex;
var element;
var numberOfControls = document.form1.length;
var var compSpec = “Your chosen processor speed is “;
compSpec = compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value;
compSpec = compSpec + “\nWith the following additional components\n”;
In the following line, you add the value of the radio button the user has selected to your message string:
compSpec = compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value;
The global variable radCpuSpeedIndex , which was set by the radio button group's onclick event, con-
tains the index of the selected radio button.
An alternative way of fi nding out which radio button was clicked would be to loop through the radio
button group's collection and test each radio button in turn to see if it was checked. The code would
look something like this:
var radIndex;
for (radIndex = 0; radIndex < document.form1.radCPUSpeed.length; radIndex++)
{
if (document.form1.radCPUSpeed[radIndex].checked == true)
{
radCpuSpeedIndex = radIndex;
break;
}
}
But to get back to the actual code, you'll notice a few new-line ( \n ) characters thrown into the message
string for formatting reasons.
Next, you loop through the form's elements.
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);
}