For a recent intranet project, we were working on a survey application. The choices for each question were Yes, No, and N/A. On the back-end we needed to total up all the "Yes" answers and wanted to ignore the "No" and "N/A" answers. So we made this easy by setting an alias for "Yes" to "1", and the alias for "No" and "N/A" was both "0". We could just sum up all the field values and we'd have our number of "Yes" answers.

This was working fine until the customer wanted to add an additional prompt if the user clicked "N/A" making sure that's what they wanted to do. Now "No" and "N/A" need to behave slightly different but still neither contributes to the total on the back end. We couldn't change the alias, so how do we know, at the time of clicking, if "No" or "N/A" was chosen, without looking at the alias?

If you look at the HTML, the generated HTML for "No" and "N/A" is identical. It's the text inside the HTML <input> tags where you see the difference. For example, <input type="radio" name="Q_1" value="0">No and <input type="radio" name="Q_1" value="0">N/A. So how do you tell the difference? The only time you can is when the radio button is clicked. You can get a hold of the text through the document object model (DOM).

<input type="radio" name="Q_1" value="0" onclick="clickedbutton(this)">No and <input type="radio" name="Q_1" value="0" onclick="clickedbutton(this)">N/A. Passing in "this" to the function passes in information about the actual radio button that was clicked. We can then use the DOM inside that function to get at the text of the radio button.

function clickedbutton(radiobutton) {
    var text = radionbutton.nextSibling.nodeValue;
    if (text == "N/A") { alert("N/A clicked!"); }
}

The value "nextSibling" looks at the DOM and gets the next value in the hierarchy - the text of the radio button. The "nodeValue" gives you the string value of the node, which is "Yes", "No", or "N/A". So if it's N/A you can do something extra.

Note that you can only use this type of function at the time of click. If you want to do something like require comments on a N/A answer but allow blank comments on a No answer, then what are you going to do?

The best option for this is to set up a global array. The number of elements correspond to the number of questions you have on the survey. On click, you can set a flag to indicate if comments are required or not. So, your "clickedbutton" function can change:

function clickedbutton(radiobutton) {
    // all questions are 'numbered' starting with 1 and starting with the letters "Q_"
    var questionNum = radiobutton.name.substring(2, radiobutton.name.length);
    var offset = parseInt(questionNum)-1;
    var text = radiobutton.nextSibling.nodeValue;
    if (text.indexOf("No") != -1) { requireComments[offset] = false; } else { requireComments[offset] = true; }
}

Then, on submit, you can go through the "requireComments" array and if the value is "true", then check to see if the corresponding comments are present.