Accessing the descriptive label associated with a checked radiobutton

[JJA]

I have "coded values" in the value attribute of my radio button group
which I can access easily. I'd like to be able to access in Javascript
the more descriptive strings I have for each radio button. Is there a
way to extend the script snippet below to access the description of
the checked radio button?

<div class="genericinputLeft">
<table>
<tr>
<td>
<input class="transradio" type="radio" name="optDataSource" value="P"
onclick="storeDataSource()" />Conventional (Purchase only)<br />
<input class="transradio" type="radio" name="optDataSource" value="R"
onclick="storeDataSource()" />Conventional (Refinance only)<br />
<input class="transradio" type="radio" name="optDataSource" value="B"
onclick="storeDataSource()" />Conventional (Purchase and Refi)<br /</td>
<td>
<input class="transradio" type="radio" name="optDataSource"
value="FP"
onclick="storeDataSource()" />FHA (Purchase only)<br />
<input class="transradio" type="radio" name="optDataSource"
value="FR"
onclick="storeDataSource()" />FHA (Refinance only)<br />
<input class="transradio" type="radio" name="optDataSource"
value="FB"
onclick="storeDataSource()" />FHA (Purchase and Refi)<br />
<input class="transradio" type="radio" name="optDataSource"
value="VA"
onclick="storeDataSource()" />VA (Purchase and Refi)<br />
<input class="transradio" type="radio" name="optDataSource"
value="FV"
onclick="storeDataSource()" />FHA and VA (Purchase and Refi)<br /</td>
<td>
<input class="transradio" type="radio" name="optDataSource"
value="HP"
onclick="storeDataSource()" />HMDA (Purchase only)<br />
<input class="transradio" type="radio" name="optDataSource"
value="HR"
onclick="storeDataSource()" />HMDA (Refinance only)<br />
<input class="transradio" type="radio" name="optDataSource"
value="HB"
onclick="storeDataSource()" />HMDA (Purchase and Refi)<br /</td>
</tr>
</table>

</div>
<script type="text/javascript">
function storeDataSource() {
var codedValue;
for (i=0;i<document.forms[0].optDataSource.length;i++) {
if (document.forms[0].optDataSource.checked) {
codedValue = document.forms[0].optDataSource.value;
// alert("the CHECKED element in the set has index value ==> " +
i + "\n" +
// "the value of the checked relative radioButton ==>
" + codedValue);
JSSetCookie("DSI", i); // store index value of which one
is CHECKED
}
}
}

 

[Doug Gunnoe]

I have "coded values" in the value attribute of my radio button group
which I can access easily. I'd like to be able to access in Javascript
the more descriptive strings I have for each radio button. Is there a
way to extend the script snippet below to access the description of
the checked radio button?

<div class="genericinputLeft">
    <table>
        <tr>
            <td>
<input class="transradio" type="radio" name="optDataSource" value="P"
    onclick="storeDataSource()" />Conventional (Purchase only)<br />
<input class="transradio" type="radio" name="optDataSource" value="R"
    onclick="storeDataSource()" />Conventional (Refinance only)<br />
<input class="transradio" type="radio" name="optDataSource" value="B"
    onclick="storeDataSource()" />Conventional (Purchase and Refi)<br /

            </td>
            <td>

Part of the problem here is the "<input />", leaving us without the
innerHTML option, so that if you were after the text "Conventional
(Purchase only)", for these you could do

document.getElementById('r1').nextSibling.nodeValue

where 'r1' would be an id for your radio button.

<input id="r1" class="transradio" type="radio" name="optDataSource"
value="P"
onclick="storeDataSource()" />Conventional (Purchase only)<br />

And this would only work as long as your description comes right after
your radio button

 

[RobG]

Part of the problem here is the "<input />", leaving us without the
innerHTML option,

"The innerHTML option" is not viable by itself anyway, it is an IE
proprietary property that has been copied by some, but not all,
browsers. The W3C equivalent (supported by Firefox at least) is
textContent:

<URL: http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-textContent
The OP doesn't want the innerHTML or textContent of the button anyway,
what is required is the text content of the element following the
button, and the best way to do that is to wrap it in a label.

 

[RobG]

I have "coded values" in the value attribute of my radio button group
which I can access easily. I'd like to be able to access in Javascript
the more descriptive strings I have for each radio button. Is there a
way to extend the script snippet below to access the description of
the checked radio button?

<div class="genericinputLeft">
<table>
<tr>
<td>
<input class="transradio" type="radio" name="optDataSource" value="P"
onclick="storeDataSource()" />Conventional (Purchase only)<br />

Don't use XHTML markup unless you really are serving XHTML as XML, use
HTML 4.01 Strict.

The best method is to put the radio buttons inside label elements.
This has the benefit of making it easy to identify the text you want
and also increases the clickable area of the button, making it easier
to select them. It also means users can click the actual text to
select it, rather than the adjacent button. The downside is that you
have to add ID attributes to the buttons[1].

You can then get the textContent or innerText (as appropriate) of the
button's parent element to get the text you want, e.g.

<td><label for="b0"><input class="transradio" type="radio"
name="optDataSource" id="b0" value="P"
onclick="storeDataSource(this)">Conventional (Purchase only)</
label><br>


and the script is something like:

function getText(el) {
if (typeof el.textContent == 'string') return el.textContent;
if (typeof el.innerText == 'string') return el.innerText;
}

function storeDataSource(el) {
var name = el.name;
var button, buttons, value;

if (name && name.length) {
buttons = document.getElementsByName(name);
}

for (var i=0, len=buttons.length; i<len; i++) {
button = buttons;

if (button.checked) {
return getText(button.parentNode);
}
}
}

More complete versions of getText that provide a fork where neither
textContent or innerText are supported have been posted before.


1. You should only need to wrap the inputs in a label, however IE
requires matching for and id attributes always.

 

[RobG]

"The innerHTML option" is not viable by itself anyway, it is an IE
proprietary property that has been copied by some, but not all,
browsers.  The W3C equivalent (supported by Firefox at least) is
textContent:

Agggh, I was thinking of innerText - innerHTML could be used here, but
it would be a pretty horrible solution.

 

[David Mark]

I have "coded values" in the value attribute of my radio button group
which I can access easily. I'd like to be able to access in Javascript
the more descriptive strings I have for each radio button. Is there a
way to extend the script snippet below to access the description of
the checked radio button?

<div class="genericinputLeft">
    <table>
        <tr>
            <td>
<input class="transradio" type="radio" name="optDataSource" value="P"
    onclick="storeDataSource()" />Conventional (Purchase only)<br />

Don't use XHTML markup unless you really are serving XHTML as XML, use
HTML 4.01 Strict.

The best method is to put the radio buttons inside label elements.
This has the benefit of making it easy to identify the text you want
and also increases the clickable area of the button, making it easier
to select them.  It also means users can click the actual text to
select it, rather than the adjacent button. The downside is that you
have to add ID attributes to the buttons[1].

I like that method, but I have read that some screen readers are
confused by it. Because of that, I stick with the for/id link. As
noted, IE needs those attributes anyway.