Using JavaScript with ASPNet RadioButtonList Control

In this article I will explain with an example, how to use JavaScript with RadioButtonList in ASP.Net.

This article will explain how to validate RadioButtonList to find whether an item is selected or not and also how to get the Selected Text and Value of the RadioButtonList using JavaScript in ASP.Net.

HTML Markup

The following HTML Markup consists of an ASP.Net RadioButtonList.

<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 is rendered as an HTML Table with HTML RadioButtons as shown below.

Using JavaScript with ASP.Net RadioButtonList Control

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 it or get the selected Text and Value.

Next important point is that a RadioButtonList Item has two parts.

1. Text

2. Value

The Value part is available in the value attribute of the HTML RadioButton, while the Text part is available in the HTML Label element.

Validating RadioButtonList using JavaScript in ASP.Net

The following HTML Markup consists of an ASP.Net RadioButtonList and a Button.

The Button has been assigned an OnClientClick event handler, which makes a call to the Validate Javascript function.

Inside the Validate JavaScript function, first the reference of the RadioButtonList is determined and then all the RadioButtons inside the RadioButtonList are referenced.

Then a loop is executed over the referenced RadioButtons and each RadioButton is validated whether it is checked or not.

If none of the RadioButtons is checked, then a JavaScript Alert Message Box is displayed with a message informing the user, that he has to select a RadioButton from the ASP.Net RadioButtonList.

function Validate() {

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

var radio = rb.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 option!");

}

return isChecked;

}

</script>

<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>

<br />

<asp:Button ID="btnSubmit" runat="server" Text="Validate" OnClientClick="return Validate()" />

Get Selected Text and Value of the RadioButtonList using JavaScript in ASP.Net

The following HTML Markup consists of an ASP.Net RadioButtonList and a Button.

The Button has been assigned an OnClientClick event handler, which makes a call to the GetSelectedItem Javascript function.

Inside the GetSelectedItem JavaScript function, first the reference of the RadioButtonList is determined and then all the RadioButtons and Label elements inside the RadioButtonList are referenced.

Then a loop is executed over the referenced RadioButtons and each RadioButton is validated whether it is checked or not.

If the RadioButton is checked, then the value of the RadioButton (i.e. the Selected Value) and the inner HTML of the Label element (i.e. the Selected Text) is displayed using JavaScript Alert Message Box.

function GetSelectedItem() {

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

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

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

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

if (radio[i].checked) {

alert("SelectedText: " + label[i].innerHTML

+ "\nSelectedValue: " + radio[i].value);

break;

}

return false;

}