How to get the selected radio button text in asp.net using javascript : The Official Microsoft ASP.NET Forums

Reply

nag4dotnet

Member

643 Points

How to get the selected radio button text in asp.net using javascript

Sep 04, 2012 10:44 AM|LINK

Hi, I have 3 radiobuttons in my web form. I want to display the selected radio button text in a label on radio button checked. Without

using CheckedChanged event. I want to use javascript. Please help me. I am trying this

function GetRadioButtonValue()
        {

            var radio = document.getElementsByName("Classic_group");
            for (var j = 0; j < radio.length; j++)
            {

                if (radio[j].checked)
                {
                    alert(radio[j].value);
                   var text = document.getElementById(radio[j].value);
                  document.getElementById('Label4').value = text ;
                }

            }

        }

<asp:RadioButton ID="classc_6M_rbn" runat="server" GroupName="Classic_group" Text="Rs.2000/-" onclick="GetRadioButtonValue();" />

Please help me

Please "MARK AS ANSWER" if it helps....

Regards
----------
Nag

Edited by nag4dotnet on Sep 04, 2012 10:52 AM

Reply

kunal.goel

Participant

988 Points

198 Posts

Re: How to get the selected radio button text in asp.net using javascript

Sep 04, 2012 10:50 AM|LINK

Use jQuery to achieve this.

var rdBtnCountries = '<%= rdBtnCountries.ClientID %>';
        $(document).ready(function () {
            $('#btnGetValue').click(function () {
                var value = $('#' + rdBtnCountries).find('input:checked').val();
                var text = $('#' + rdBtnCountries).find('input:checked').siblings().text();
                $('#spnRdb').html('').html('<b>' + $('#spnRdb').html() + text + '(' + value + ')</b>');
                return false;
            });
});

<div style="float:left; width:50%;">
<asp:RadioButtonList ID="rdBtnCountries" runat="server"></asp:RadioButtonList>
<input type="button" id="btnGetValue" value="Get Value" />
<span id="spnRdb"></span>
</div>

            private void PopulateCountries()
        {
            List<CountryDO> countries = new List<CountryDO>();
            countries.Add(new CountryDO { CountryID =1, Country = "India" });
            countries.Add(new CountryDO { CountryID = 2, Country = "Singapore" });
            countries.Add(new CountryDO { CountryID = 3, Country = "Malaysia" });
            countries.Add(new CountryDO { CountryID = 4, Country = "United State of America" });
            countries.Add(new CountryDO { CountryID = 5, Country = "United Kingdom" });
            
            rdBtnCountries.DataSource = countries;
            rdBtnCountries.DataTextField = "Country";
            rdBtnCountries.DataValueField = "CountryID";
            rdBtnCountries.DataBind();

        }

    public class CountryDO
    {
        public int CountryID { get; set; }
        public string Country { get; set; }
    }

Call PopulateCountries() method on page load.

Please mark it as answer if this is helpful

Thanks and regards
Kunal Goel

Edited by kunal.goel on Sep 04, 2012 10:51 AM

Reply

nag4dotnet

Member

643 Points

166 Posts

Re: How to get the selected radio button text in asp.net using javascript

Sep 04, 2012 10:53 AM|LINK

Thanks for your reply. But i want to display it in label when radio button is clicked.

Please "MARK AS ANSWER" if it helps....

Regards
----------
Nag

Edited by nag4dotnet on Sep 04, 2012 10:54 AM

Reply

kunal.goel

Participant

988 Points

198 Posts

Re: How to get the selected radio button text in asp.net using javascript

Sep 04, 2012 12:46 PM|LINK

Instead of button click use the following code:

$('#' + rdBtnCountries).find('input').live('click', function () {
                alert($(this).val());
            });
or you can also write in this way:

 $('input:radio').click(function () {
                alert($(this).val());
                alert($(this).siblings().text());
$('#spanID').html($(this).siblings().text());
            });

Please mark it as answer if this is helpful

Thanks and regards
Kunal Goel

Edited by kunal.goel on Sep 04, 2012 12:50 PM
Marked as answer by Sage Gu - MSFT on Sep 11, 2012 11:15 PM

Reply

geniusvishal

Star

14308 Points

2821 Posts

Re: How to get the selected radio button text in asp.net using javascript

Sep 04, 2012 01:07 PM|LINK

nag4dotnet
Thanks for your reply. But i want to display it in label when radio button is clicked.

Have a look over here:

http://stackoverflow.com/questions/5564572/get-associated-radio-button-label-text-using-javascript

http://www.isolutionteam.co.uk/getting-aspnet-radiobutton-list-text-using-javascript-not-jquery/

http://stackoverflow.com/questions/2933874/how-to-get-a-aspradiobutton-text-in-javascript

Regards.

Vishal Ranjan

My Website
www.dotnetvishal.com

Edited by geniusvishal on Jan 08, 2013 11:33 AM

Reply

Ruchira

All-Star

43068 Points

7045 Posts

MVP

Re: How to get the selected radio button text in asp.net using javascript

Sep 05, 2012 01:35 PM|LINK

nag4dotnet
But i want to display it in label when radio button is clicked.

Hello,

Check the sample app I've created for you

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script type="text/javascript">
        function test() {
            var list = document.getElementById("<%=RadioButtonList1.ClientID%>"); //Client ID of the radiolist
            var inputs = list.getElementsByTagName("input");
            var selected;
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].checked) {
                    selected = inputs[i];
                    break;
                }
            }
            if (selected) {
                document.getElementById("<%=Label1.ClientID %>").innerHTML = selected.value;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="Label1" runat="server"></asp:Label>
    <asp:RadioButtonList ID="RadioButtonList1" runat="server" onclick="test()">
        <asp:ListItem>One</asp:ListItem>
        <asp:ListItem>Two</asp:ListItem>
    </asp:RadioButtonList>
    </form>
</body>
</html>

Please 'Mark as Answer' if this post helps you.

My Tech blog | My YouTube Channel