Java Reference
In-Depth Information
Next come the radio buttons for selecting the required CPU speed, and these are a little more complex.
Again they are put into a table for formatting purposes.
<table>
<tr>
<td>
<input type=”radio” name=”radCPUSpeed” checked=”checked”
value=”3.8 GHz” onclick=”return radCPUSpeed_onclick(0)“ />
</td>
<td>
3.8 GHz
</td>
<td>
<input type=”radio” name=”radCPUSpeed” value=”4.8 GHz”
onclick=”return radCPUSpeed_onclick(1)“ />
</td>
<td>
4.8 GHz
</td>
<td>
<input type=”radio” name=”radCPUSpeed” value=”6 Ghz”
onclick=”return radCPUSpeed_onclick(2)“ />
</td>
<td>
6 GHz
</td>
</tr>
</table>
The radio button group name is
radCPUSpeed
. Here, the fi rst one is set to be checked by default by the
inclusion of the word
checked
inside the
<input/>
element's defi nition. It's a good idea to ensure that
you have one radio button checked by default, because if you do not and the user doesn't select a but-
ton, the form will be submitted with no value for that radio group.
You make use of the onclick event of each Radio object, and each button connects to the same function,
radCPUSpeed_onclick(). But for each radio button, you pass a value — the index of that particular
button in the radCPUSpeed radio button group collection. This makes it easy to determine which radio
button was selected. You'll look at this function a little later, but fi rst let's look at the standard button that
completes your form.
<input type=”button” value=”Check Form” name=”btnCheck”
onclick=”return btnCheck_onclick()“ />
This button's
onclick
event handler is connected to the
btnCheck_onclick()
function and is for the
user to click when they complete the form.
So you have two functions: radCPUSpeed_onclick() and btnCheck_onclick(). These are both
defi ned in the script block in the head of the page. Let's look at this script block now. It starts by declaring
a variable radCpuSpeedIndex. This will be used to store the currently selected index of the radCPUSpeed
radio button group.
var radCpuSpeedIndex = 0;
