RadioButtonList and Javascript

[dighazuse]

trying to get a javascript attached to a DataGrid RadioButtonList. I
have a similar thing working for a DDL so i copied that for the RBL.
It "errors" when i am trying to get the current selected value for the
RBL.


code in ItemDataBound:

rblDC.Attributes.Add("onClick", "rblDC_onClick('" + lblDC.ClientID +
"', '" + rblDCodes.ClientID + "', '" + e.Item.ItemType + "')");

Javascript:

function rblDC_onClick(lblDCId, rblDCId, eiT)
{
var lblDC = document.getElementById(lblDCId);
var rblDC = document.getElementById(rblDCId);
var rblDCSelection = rblDC.options[rblDC.selectedIndex].value); <--
JS error
if (lblDC.innerText == rblDCSelection)
"do stuff"
}

the error i get says:
"options" is null or is not an object.
which, to noob me, says that it doesn't have a valid rblDC. not sure
though. could be a syntax error of sorts.

thank you
troy

 

[Bruce Barker]

a radio button list renders as a table of ID=ClientID, with an <input
type=radio> for each radio button. the buttons are named ClientID, and given
id of ClientID + "_" + index.

so adding a onclick is to the table and tables do not have options, thus
your error.



you need onclick event for each radio button, and check checked property.


try

function rblDC_onClick(lblDCId, rblDCId, eiT)
{
var lblDC = document.getElementById(lblDCId);
var rblDCs = document.getElementsByName(rblDCId);
var rblDCSelection = "";
for (var i in rblDCs)
{
if (rblDCs.checked)
{
rblDCSelection = rblDCs.value;
break;
}
}
if (lblDC.innerText == rblDCSelection)
"do stuff"
}

-- bruce (sqlwork.com)

 

[dighazuse]

thank you for replying Bruce:
perhaps i am misunderstanding but I am adding the Attribute for each
item/row on the DataGrid at ItemDataBound time.

If I do need to check the index, it then confuses me why the exact same
code works perfectly for my DDL, where I don't have to check the index.

Troy

 

[Bruce Barker]

the drop drown renders as a <select>. in the browser dom a select has an
options array, one for each option caontained in the select. a option has a
value and text propery (also a selected which indicates if this is the
seledted item)

there is no radio list in the browser, asp.net just renders a table with
radio buttons. in the browser, if the radio buttons have the same name, they
are treated as exclusive. their is id need to be unique. here is a simple
radio list:

<asp:RadioButtonList id="myList" runat="server">
<asp:ListItem Value="1">option 1</asp:ListItem>
<asp:ListItem Value="2">option 2</asp:ListItem>
</asp:RadioButtonList>

will render:

<table id="myList" border="0">
<tr>
<td>
<input id="myList_0" type="radio" name="myList" value="1" />
<label for="myList_0">option 1</label>
</td>
</tr>
<tr>
<td>
<input id="myList_1" type="radio" name="myList" value="2" />
<label for="myList_1">option 2</label>
</td>
</tr>
</table>

to get a collection of the radio buttons, you get all form inputs with the
name myList.

document.getElementsByName("myList");

to figure out the selected one, you look looking for a checked one.

note: if you want to write client script, you should study the html dom.

-- bruce (sqlwork.com)

 

[dighazuse]

thank you again bruce.

being new at this I was not aware that a RBL isn't really 1 element but
a group of individual elements. good to know. I see why the DDL is
different.

So, your code suggestion now, i believe, makes sense.
To go over it again then:
- the code:
var rblDCs = document.getElementsByName(rblDCId);

is returning the names of the elements of the table (rblDC_0, rblDC_1
.... )

- the code:
for (i in rblDCs)

is spinning through those names trying to figure out which one has
been checked.
correct?

however, unfortunately there has to be a however, the code to get the
elementsbyname doesn't seem to be returning the names .. but something
else like attributes of the table and such (like "length").

is there a step that I am missing?

thank you
troy

 

[dighazuse]

also, I noticed that if the names of the elements are not the same.
The table name is
itg__ctl3_rblDC
and the names of the individual RBL elements are
itg:_ctl3:rbldc