One Form Field with Multiple Values
2. Select Options
Join the Discussion
Related Articles
More of this Article
Radio Buttons are not the only fields where we can assign multiple vaoues to the one form field. We can do exactly the same thing almost exactly the same way using option fields within a select. Again we simply specify the values as a comma separated list. The only difference is that instead of needing to use a function like we do to retrieve the values for the selected radio button, accessing the values for the selected option in a select list is much easier. Let's take another look at our keyboard example and this time let's make it two selection lists and a button to allow a larger variety of chords to be chosen. The main selection list (the one with the scrollbar) will have multiple values associated with each entry that describe the pattern of the keys that are pressed for that chord. The second select list on the left of it replaces our radio buttons from the last example and this time instead of having multiple values each has only one value which will act as a modifier for all of the values from the main list. The button will also act as a modifier for one of the values in the selected entry from the main list with the actual entry modified changing each time the button is pressed. Firstly we'll look at the keyboard chord selection script:
Instead of having a separate button to trigger the colouring of the appropriate keys both selection lists now have an onchange event handler attached to them to trigger the processing that looks like this:
"inv=0;setall(this.form.chord,this.form.formula,'#cfc');"
The Invert Chord button also has almost the same code attached to the onclick event handler with the difference being that is uses inv++ instead of inv = 0. We are also now passing both lists to the setall() function instead of the one radio button group.
Again the setall() function splits the set of values into separate array entries. This time we also add the value from the selected entry in the first list as well as possibly subtracting a set amount from one of the passed values depending on the value of the inv variable which we set globally at the start of the code. Here's our modified function:
function setall(t,f,c) {
undo();
var b = parseInt(t.value)-1;
var a = f.value.split(',');
if (inv >= a.length) inv = 0;
for (var i=a.length -1; i >= 0; i--) {
var k = b + parseInt(a[i]);
if (inv > 0 && inv == i) k -= 12;
chg(k,c);}}
So there you are, we can not only pass multiple values in one selected option by using a comma separated list but we can also modify one or all of those values based on the values that other form fields and/or variables contain.
