Here I am explaining how to use JavaScript with RadioButtonList in ASP.Net. I will explain how one can validate the RadioButtonList whether an item are selected or not and also how to get the SelectedValue and SelectedText of a RadioButtonList using JavaScript

 

Below is the RadioButtonList I am using for this article

<asp:RadioButtonList ID="RadioButtonList1" runat="server" >

    <asp:ListItem Text = "One" Value = "1"></asp:ListItem>

    <asp:ListItem Text = "Two" Value = "2"></asp:ListItem>

    <asp:ListItem Text = "Three" Value = "3"></asp:ListItem>

</asp:RadioButtonList>

 

Concept

The ASP.Net RadioButtonList Control when rendered Client Side page it is rendered as HTML Table with RadioButtons in it. Refer the figure below.


RadioButtonList rendered as HTML table

Hence we will need to write a script which will loop through all the controls (RadioButtons) in the generated HTML table in order to validate or get the selected Item

Next important point is that a RadioButtonList Item has two parts

1. Text

2. Value

Now when you do a research of the HTML Source you get the following


Text part of RadioButtonList Item rendered as Label

You can see above in the yellow mark that Value is rendered as checkbox value attribute while the Text is rendered between <label> tags.

   

 

Validating RadioButtonList

 

Below is the JavaScript function to perform validations in an ASP.Net RadioButtonList control.

<script type = "text/javascript">

function Validate()

{

   var RB1 = document.getElementById("<%=RadioButtonList1.ClientID%>");

   var radio = RB1.getElementsByTagName("input");

   var isChecked=false;

   for (var i=0;i<radio.length;i++)

   {

       if (radio[i].checked)

       {

           isChecked=true;

           break;

       }

   }

   if(!isChecked)

   {

        alert("Please select an item");

   }

   return isChecked;

}

</script>

 

You will notice I am simply looping through all the input controls (RadioButtons) and checking whether it is checked. If not it prompts the user to select an item when user selects an item the page is submitted

The above JavaScript method is called on the click of a button given below

<asp:Button ID="Button1" runat="server" Text="Validate" OnClientClick =

"return Validate()" />

 

 

 

Getting SelectedText and SelectedValue

The following JavaScript function is used to get the Text and Value of the ASP.Net RadioButtonList Control.

   

           

<script type = "text/javascript">

function GetSelectedItem()

{

   var RB1 = document.getElementById("<%=RadioButtonList1.ClientID%>");

   var radio = RB1.getElementsByTagName("input");

   var label = RB1.getElementsByTagName("label");

   for (var i=0;i<radio.length;i++)

   {

       if (radio[i].checked)

       {

           alert("SelectedText = " + label[i].innerHTML);

           alert("SelectedValue = " + radio[i].value);

       }

   }

   return false;

}

</script> 

 

As you can see above in this case I am also looking for label tag along with input since the label tag has the Text part enclosed in it.

The above JavaScript function is called on the click event of button given below

<asp:Button ID="Button2" runat="server" Text="SelectedItem" OnClientClick

 = "return GetSelectedItem()" />

 


The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.


You can download the sample for this tutorial using the link below

JavaScriptWithRadioButtonList.zip (2.37 kb)