Evaluation of RadioButtonList control using JavaScript - ASP.Net

Question

I am developing a website using asp.net and C#.

I am using a RadioButtonList control. The code snippet for RadioButtonList is shown below

 <asp:RadioButtonList ID="RLCompareParameter" runat="server" 
            RepeatDirection="Horizontal" meta:resourcekey="rsKey_RLCompareParameter" 
            AutoPostBack="True" 
            onselectedindexchanged="RLCompareParameter_SelectedIndexChanged">
          <asp:ListItem Selected="True" Value="Forms" meta:resourcekey="rsKey_RLCompareParameterListItemForms" Text="Forms"></asp:ListItem>
          <asp:ListItem Value="Segments" meta:resourcekey="rsKey_RLCompareParameterListItemSegments" Text="Segments"></asp:ListItem>
          <asp:ListItem Value="Questions" meta:resourcekey="rsKey_RLCompareParameterListItemQuestions" Text="Questions"></asp:ListItem>
     </asp:RadioButtonList>

There is a button in the same page. While clicking on that button i want to display an alert message based on the selected radio list item using javascript. Some part of my javascript function is shown below

  var RLCompareParameter = this.document.getElementById("<%= RLCompareParameter.ClientID %>");
         if (RLCompareParameter.SelectedValue == "Forms") {
             if (document.getElementById("<%= lbAvailableForms.ClientID %>").value == "") {
                 alert("Please select a form from Available Evaluation Forms ");
                 return false;
             }


         } else if (RLCompareParameter.SelectedValue == "Segments") {
             if (document.getElementById("<%= lbAvailableSegments.ClientID %>").value == "") {
                 alert("Please select a segment from the available segments ");
                 return false;
             }
         } else if (RLCompareParameter.SelectedValue == "Questions") {
             if (document.getElementById("<%= lbAvailableQuestions.ClientID %>").value == "") {
                 alert("Please select a Question from the available questions");
                 return false;

             } 
         }

But the if(RLCompareParameter.SelectedValue == "some value") always false. i think there is no attribute like selected value for RadioButtonList control. I hope someone help me

Answer 1

In html, there is no such thing as a RadioButtonList. Your RLCompareParameter variable will be a reference to the table or span that is containing the three input elements (thats what the ASP.NET control outputs into your page). SelectedValue is only for ASP.NET code, not javascript.

You will have to get a reference to the specific input element itself and look at its checked property in your if statements to see whether that radio button is selected or not. There are several ways to do this. Here's one that might work:

 var RLCompareParameter = document.getElementById("<%= RLCompareParameter.ClientID %>");
 var radioButtons = RLCompareParameter.getElementsByTagName('input');

 if (radioButtons[0].checked) {
     if (document.getElementById("<%= lbAvailableForms.ClientID %>").value == "") {
         alert("Please select a form from Available Evaluation Forms ");
         return false;
     }
 } else if (radioButtons[1].checked) {
     if (document.getElementById("<%= lbAvailableSegments.ClientID %>").value == "") {
         alert("Please select a segment from the available segments ");
         return false;
     }
 } else if (radioButtons[2].checked) {
     if (document.getElementById("<%= lbAvailableQuestions.ClientID %>").value == "") {
         alert("Please select a Question from the available questions");
         return false;

     } 
 }