Getting value of Radio buttons with Master Pages

Question

I have an aspx page that uses a master page. On this page I have a group of radio buttons. I need to get at the checked property for each of the elements in the radio button group in javascript. Before the page was converted to use a master page, the following javascript code worked just fine:

if((!f.rblRegUseVehicles[0].checked) && (!f.rblRegUseVehicles[1].checked))
{
    isValid = "false";
}

f is the reference to the form. This worked just fine.

When the page was chanded to use a Master Page, I changed the javascript to the following:

if((!f.<%=rblRegUseVehicles.ClientID%>[0].checked) && (!f.<%=rblRegUseVehicles.ClientID%>[1].checked))
{
    isValid = "false";
}

Now, the javascript is failing because it can't find the element. In the "View Source" I have elements with the name:

<input id="ctl00_cphContent_rblRegUseVehicles_0" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="Yes" />

<input id="ctl00_cphContent_rblRegUseVehicles_1" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="No" />

The only code that works is

document.<%=Form.ClientID%>.<%=rblRegUseVehicles.ClientID%>_0.checked

I want the javascript to reference the array like before the page was converted to use a Master Page. How can I do that?

Answer 1

This is a part of ASP.NET that has always been difficult. You need to have static javascript that references dynamically created element ids!

This is how I have always solved the problem:

Wrap your RadioButtonList in a div or p or whatever you want:

<div id="yourId">
    <asp:RadioButtonList id="radiolist1" runat="server">
        <!-- ... -->
    </asp:RadioButtonList>
</div>

Which renders to something like this:

<div id="yourId">
    <table id="radiolist1" border="0">
        <tr>
            <td>
                <input id="radiolist1_0" type="radio" name="radiolist1" value="Item 1" checked="checked" />
                <label for="radiolist1_0">Item 1</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="radiolist1_1" type="radio" name="radiolist1" value="Item 2" />
                <label for="radiolist1_1">Item 2</label>
            </td>
        </tr>
    </table>
</div>

And this would allow you to have a static javascript function that targets yourId which doesn't get runat="server" . Then your javascript would look something like this:

var rbl = document.getElementById("yourId");            
isValid = (!rbl.getElementsByTagName("input")[0].checked 
    && !rbl.getElementsByTagName("input")[1].checked);

Answer 2

If you want to explore the idea of using jQuery rather than straight javascript, this should do the trick for you.

if ( $('input[id*=rblRegUseVehicles]:checked').length < 0 ) isValid = "false";

The selector gets all checked radiobuttons who's id contains 'rblRegUseVehicles'.

Edit

If you want to stick with your original script,using UniqueID rather than ClientID may work

if((!f.<%=rblRegUseVehicles.UniqueID%>[0].checked) && (!f.<%=rblRegUseVehicles.UniqueID%>[1].checked))
{
    isValid = "false";
}