Getting selected value from asp:RadioButtonList in JavaScript

While writing UI code, we must have came across scenaio where we need to get the asp:RadioButtonList value into JavaScript and validate some other field.

HTML Code

In following code I am getting asp:RadioButtonList and populating 3 ListItems. Then I have a button and I am calling a JavaScript function when it is clicked.

<table>

<tr>

                                <td>

                                    <asp:RadioButtonList ID="radiobuttonlist1" runat="Server" RepeatLayout="flow" RepeatDirection="horizontal">

                                        <asp:ListItem Text="Radio 1" Value="1" Selected="True"></asp:ListItem>

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

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

                                    </asp:RadioButtonList>

                                </td>

                                <td>

                                    <input type="button" value="Submit" onclick="GetRadioButtonValue('<%= radiobuttonlist1.ClientID %>')" />

                                </td>

                            </tr>

                        </table>

JavaScript Code

In following code, I am getting the radio button element looping through its length. Checking each radiobutton for its checked value by accessing thorugh its index. As I am using RadioButtonList and I have 3 ListItem so I will collection of RadioButtons that lets me get each one of them by its index. If the radio[j].checked is true and I am giving value into an alert box.

<script language="javascript" type="text/javascript">

        // Get radio button list value

        function GetRadioButtonValue(id)

        {

            var radio = document.getElementsByName(id);

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

            {

                if (radio[j].checked)

                    alert(radio[j].value);

            }

        }

</script>

I hope this small article help someone in need :) Happy Coding !!

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.