Hey there,
Not sure if this is the kind of solution you’re after, but I just kind of ran with it
From what I understand, the key to your problem is that you need to be able to change the value of a set of options based on something that was selected before.
Luckily, there is (IMO) a very simple solution - we can use a small matrix to represent the different values.
e.g.
// our value matrix
matrix = [
[ 50, 60, 70 ], //Section A
[ 100, 120, 130 ] //Section B
];
This means we can set values on section a/b and the options 1/2/3 - these values can correspond with the indexes of the matrix and take away a lot of the pain.
We’ll use some functions to get the indexes of the section and option, we can then figure out which entry in the matrix we’re after.
I’ve assumed some basic HTML:
<form id="someForm">
<fieldset>
<p><input type="radio" id="sect_1" class="sectionField" name="section" value="0" checked/><label for="sect_1"> Section A</label></p>
<p><input type="radio" id="sect_2" class="sectionField" name="section" value="1" /><label for="sect_2"> Section B</label></p>
</fieldset>
<fieldset>
<p><input type="radio" id="option_1" class="optionField" name="chosenOption" value="0" checked/><label for="option_1"> Option 1</label></p>
<p><input type="radio" id="option_2" class="optionField" name="chosenOption" value="1" /><label for="option_2"> Option 2</label></p>
<p><input type="radio" id="option_3" class="optionField" name="chosenOption" value="2" /><label for="option_3"> Option 3</label></p>
</fieldset>
<fieldset>
<p>Value of selected option: <input type="text" id="value" /></p>
</fieldset>
</form>​
As for the JavaScript:
Step 1 - some basics
(function(){
"use strict";
//declare vars
var form,
sectionFields,
sectionFieldsLen,
optionFields,
optionFieldsLen,
matrix;
// our value matrix
matrix = [
[ 50, 60, 70 ], //Section A
[ 100, 120, 130 ] //Section B
];
//get access to our DOM elements
form = document.getElementById("someForm");
sectionFields = form.getElementsByClassName("sectionField");
sectionFieldsLen = sectionFields.length; //don't forget to cache the length
optionFields = form.getElementsByClassName("optionField");
optionFieldsLen = optionFields.length;
Now that we have references to our DOM elements, we can create some functions to help us out
Step 2 - getting the section and option values
/**
* Get Current Section index
*/
function getSection() {
for (var i = 0; i < sectionFields.length; i++) {
if (sectionFields[i].checked) {
return parseInt( sectionFields[i].value, 10);
}
}
return false;
}
/**
* Get current option index
*/
function getOption() {
for (var i = 0; i < optionFields.length; i++) {
if (optionFields[i].checked) {
return parseInt( optionFields[i].value, 10);
}
}
return false;
}
Great, nice and simple - we can now get the indexes required to access our matrix.
Of course there is a small function to add the value to the “value” element:
Step 3 - Setting the value somewhere
/**
* Put the value of the selected option in the field
*/
function setValue() {
var sectionIndex = getSection(),
optionIndex = getOption(),
theValue;
//set the value using the matrix we declared
theValue = matrix[ sectionIndex ][ optionIndex ];
document.getElementById("value").value = theValue;
}
Ok, so how to we get things happening? We need to set up an event handler for the change event on those radio buttons.
Rather than setting up a bunch of event handlers, I’ve opted to watch the “change” event on the form, this way
we have only one event handler and we can just work out what the target was to know whether we need to do something.
Sounds complicated, but it really isn’t:
Step 4 - Handling the change event
/**
* Handle the change event on section/option fields
*
* @param {Event} e
*/
function changeHandler(e) {
var target,
className;
target = e.target;
className = target.getAttribute("class");
// make sure we only process the rest of the event handler
// if we're dealing with either a sectionField or an optionField
if (className.match(/sectionField|optionField/)) {
setValue();
}
}
form.addEventListener("change", changeHandler);
Of course in my HTML example, I’ve set the first items to checked (not required, but can be handy) - if you’re also doing this, you might want to call setValue() at the end to make sure the initial value is set.
Step 5 - finishing up
setValue(); //optionally set the value initially.
}());
I’ve posted a complete solution on JS Fiddle: http://jsfiddle.net/GeekyJohn/2Eqe2/
Let me know how you get on