Using onClick

So far we've been cycling through radio buttons and checkboxes as arrays to determine which ones are checked or not. Then we use specific VALUEs. There is a more direct method for assigning values with form objects using the "onClick" method.

The key to this technique is that all radio buttons and checkboxes are activated by clicking them. Instead of scanning for checked button's and box's values, we can use "onClick" to assign the value directly. Here's a quick example:

<input type="radio" name="first_names"
onClick="name1 = 'George'">

<input type="radio" name="first_names"
onClick="name1 = 'Luke'">

Notice that the radio buttons above have no VALUE. The "onClick", however, assigns a value of "George" or "Luke" to a variable called "name1". We can now use the variable "name1" directly in a JavaScript. The "name1" variable will have the value given in in the "onClick" event.

Instead of coding all of the previous loops, we can just use "alert(name)" in our function. This can be a big timesaver in many circumstances.

There are two general methods of using "onClick" to assign a value directly. The first uses "onClick" to call a function and pass one or more values as parameters. This is just like we've used "onClick" before. It's great when one selection must provide multiple values. Perfect for radio buttons.

The second method is roughly similar to our brief example above. It uses a globally declared variable and assigns it a specific value. The function is called by another event, like a submit button. This is more useful for checkboxes and appending multiple values to strings.

Function Call with Parameters

This example shows the use of "onClick" with function calls and parameters. You click a radio button and an alert() box immediately appears to show you which month you picked.

This works much like a link to a JavaScript. Here's the <input> for "January":

<input type="radio" name="monthbutton" onClick="showMonth('January')">
January<br>

Note that the "onClick" event calls a function called "showMonth()". The parameter "January" is sent to this function. Here's the simple function needed for the alert() box:

<script language="JavaScript">

function showMonth(month){
alert (month);
}
</script>

A lot less coding than looping, and fewer Netscape problems. Each month's <input> sends the appropriate parameter to the "showMonth()" function.

Direct Variable Assignment

In the case of multiple choices, such as with checkboxes, a function call is probably not appropriate. This is because of the difficulty in determining the total data to send in the parameters.

In this case, a direct variable assignment is used. A working form coded with direct assignments is here. This is the code for the "Dog" <input>:

<input type="checkbox" name="animals" onClick="beasts = beasts + 'dogs' + ', ';">
Dogs<br>

You should be able to recognize that we are appending a string called "beasts". This string's variable is declared outside the function. Oh, the function is called "showAnimals()" and is called with the submit button. Here's the <script>:

<script language="JavaScript">

var beasts = "You like ";

function showAnimals(){
alert (beasts);
}

</script>

The most important thing to remember about the JavaScript above is that the "beasts" variable is declared outside and before the function. This means it's a global variable.

Think what would happen if we declared the variable inside the function. Each time the submit button was clicked and the function run, the value would reset to the initial "You like ". It would dump the checkbox's "onClick" values.

Declaring the variable used globally is the key point to remember when using direct variable assignments to append to a string.

Another interesting note is that the values are listed in the order clicked, not the order in which the boxes are coded. The variable is updated on the spot with each click.

Summary & Exercises

You can use the "onClick" event to assign values to variables or parameters in <input> tags. This can substitute for looping and scanning for checked buttons and boxes.

For radio buttons, or other circumstances where only one value may be selected at a time, using a function call and parameters is preferred. This call is coded with the "onClick" event. Multiple parameters may be used for any given button.

When using checkboxes, or other multiple choice schemes, a direct variable assignment can be used with an "onClick" event. Multiple variable assignments can be made with each <input>

Note: There's no hard and fast rule saying you can't use direct variable assignments with radio buttons. It's nearly impossible, however, to use function calls with checkboxes.

Make your own forms using both of the above techniques and blend the strings into one final output. Hint: alert(variable1 +variable2).

Now make a form where two or more variables are appended or changed with the selection of checkboxes.Hint: onClick="variable1 = 'Frank';variable2 = 'Martha'"

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index