1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blmulti1.htm

was emailed to:

Thanks for sharing About.com with others!

One Form Field with Multiple Values

1. Radio Buttons

Join the Discussion

Questions? Comments?

Related Articles

Drawing with CSS Radio Buttons

More of this Article

Select Options

Normally when you set up a form you expect each value to have a field of its own. This is fine for when you have fields that your visitors will be using to enter information but sometimes you may have situations where you want them to select one of several different options where there are several values associated with each option. These selections are best done with either radio buttons or a selection list. In either case we need an easy way to pass all of the values associated with the selected option to whatever is going to perform the processing.

Let's start by looking at how we can do this with a set of radio buttons. As an example let's use my piano keyboard and set up a series of radio buttons that will highlight the keys associated with particular chords.

Each radio button in the form on the left defines three keys that are to be highlighted in light green on the above keyboard to show which keys need to be depressed on a piano keyboard to play that particular chord (there is a relationship beteween the three values to be passed in this example but the method being illustrated will work regardless of what the individual values are). What we are going to do is to set up a text string value associated with each radio button that contains all three of the valuies that we need to pass to our Javascript. Here is the HTML for creating the first of the radio buttons:

<label for="n0"><input type="radio" name="chord" id="n0" value="12,16,19" />C</label>

You will note that the three values to be passed are specified as a comma separated list. We can then split the value from within the Javascript code to give us an array of values. While the values in this example are numbers the same principle applies to any types of values.

Of course we need to attach the Javascript to the form in order to be able to call it and in this instance we attach it to the button at the bottom of the form like this:

<input type="button" onclick="setall(this.form.chord,'#cfc');" value="chord" />

This code calls the setall function passing the radio button group called chord from the same form along with a colour code (in this case a light green).

In the setall function we start by making sure that any prior colour coding of the keys is undone and then we retrieve the value associated with the selected radio button. We can then split this into an array and process each of the values separately in order to colouir each of the specified keys. Here's the Javascript code I used (with the special processing to split the comma separated list into an array and process each separately shown in bold):

function setall(t,c) {
undo();
var b = valButton(t);
var a = b.split(',');
for (var i=a.length -1; i >= 0; i--) {

chg(a[i],c);}}

The undo() and chg() functions that this calls are the same ones I already defined when I animated the keyboard while the valButton() function is the one I always use to validate radio buttons.

Next we'll look at how we can do the same thing with Select Options and how we can use additional form fields and variables to modify one or more of the multiple values passed.

Related Video
Make a PowerPoint Multiple Choice Quiz
Adobe Photoshop Web Button

©2014 About.com. All rights reserved.