Beginning JavaScript | 11

[previous] [next]

Textareas, Checkboxes and Radio Buttons

How It Works

Within a form called form1 in the body of the page, we define two textareas and a button. The first textarea is the one whose events we are going to monitor. We attach code which calls the DisplayEvent() function to each of the onchange, onkeydown, onkeypress, and onkeyup event handlers. The value passed to the function reflects the name of the event firing.

Finally we have our button element:

Notice that the onclick event handler for the button is not calling a function, but just executing a line of JavaScript. Although we do normally call functions it's not compulsory; if we have just one line of code to execute, it's easier just to insert that rather than create a function and call it. In this case, the onclick event handler is connected to some code that sets the contents of the second textarea to empty ('').

Now let's look at the DisplayEvent() function. This is defined in a script block in the head of the page. It adds the name of the event that it has been passed as a parameter to the text already contained in the second textarea:

Checkboxes and Radio Buttons

I've put the discussion of checkboxes and radio buttons together, because their objects have identical properties, methods, and events. A checkbox allows the user to tick and untick it. It is similar to the paper surveys you may get where you are asked to "check the boxes that apply to you". Radio buttons are basically a group of checkboxes, with the property that only one can be checked at once. Of course, they also look different and their group nature means that they are treated differently.

Creating checkboxes and radio buttons requires our old friend the <input> tag. Its TYPE attribute is set to "checkbox" or "radio" to determine which box or button is created. To set a checkbox or a radio button to be checked when the page is loaded, we simply insert the keyword CHECKED into the <input> tag. So to create a checkbox, which is already checked, our <input> tag will be:

I mentioned above that radio buttons are group elements. In fact, there is little point in putting just one on a page as the user won't be able to choose between any alternative boxes.

To create a group of radio buttons we simply give each radio button the same NAME. This creates an array of radio buttons going by that name which we can access, as we would with any array, using its index.

For example, to create a group of three radio buttons, our HTML would be:

We can have as many groups of radio buttons in a form as we want, by just giving each group their own unique name. Note that we have only used one CHECKED attribute, since only one of the radio buttons in the group can be checked. If we had used the CHECKED attribute in more than one of the radio buttons, only the last of these would have actually been checked.

Using the VALUE attribute of the checkbox and radio button elements is different from previous elements we've looked at. Firstly, it tells you nothing about the user's interaction with an element, as it's predefined in our HTML or by our JavaScript. Whether a checkbox or radio button is checked or not, it still returns the same value. Secondly, when a form is posted to a server, only the values of the checked checkboxes and radio buttons are sent. So, if you have a form with 10 checkboxes on and the user submits the form with none of these checked, then nothing would be sent to the server except a blank form. We'll learn more about this when we look at server-side scripting.

Each checkbox has an associated Checkbox object and each radio button in a group has a separate Radio object. As mentioned above, with radio buttons of the same name, we can access each Radio object in a group by treating the group of radio buttons as an array, with the name of the array being the name of the radio buttons in the group. As with any array, we have the length property, which will tell us how many radio buttons there are in that group.

For determining whether a user has actually checked or unchecked a checkbox, we need to use the checked property of the Checkbox object. This property returns true if the checkbox is currently checked, and false if not.

Radio buttons are slightly different. Because radio buttons with the same name are grouped together, we need to test each Radio object in the group in turn to see if it has been checked. Only one of the radio buttons in a group can be checked, so if you check another one in the group, the previously checked one will become unchecked and the new one will be checked in its place.

Both Checkbox and Radio have the event handlers, onclick, onfocus, and onblur, and these operate as we saw for the other elements.

[previous] [next]