Search code examples
jqueryasp.netwebformsradiobuttonlistaspwizard

Getting RadioButtonList inside Wizard control in asp.net

I have a asp:Wizard control and asp:RadioButtonList in first WizardSteps out of two WizardSteps. I want to get the Text and Value of the selected radio button from javascript but I am unable to get the result. I need someone's help. My code is as below:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var servieTypes = document.getElementById('<%=Wizard1.FindControl("rdoServiceType").ClientID%>');

            $(servieTypes + ' input').click(function () {
                var selectedText = $(this).text();
                var selectedValue = $(this).val();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false">
                <WizardSteps>
                    <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
                        <fieldset id="Fieldset1" runat="server">
                            <legend id="Legend1" runat="server">Type</legend>
                            <asp:RadioButtonList ID="rdoServiceType" RepeatLayout="Flow" runat="server">
                                <asp:ListItem Text="Gold" Value="0">Gold</asp:ListItem>
                                <asp:ListItem Text="Siver" Value="1">Silver</asp:ListItem>
                                <asp:ListItem Text="Premium" Value="2">Premium</asp:ListItem>
                            </asp:RadioButtonList>
                        </fieldset>

                    </asp:WizardStep>
                    <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
                        <fieldset id="Fieldset2" runat="server">
                            <legend id="Legend2" runat="server">User</legend>
                            <asp:Label ID="lblFirstName" runat="server" Text="First Name" AssociatedControlID="txtFirstName"></asp:Label>
                            <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                            <asp:Label ID="lblLastName" runat="server" Text="Last Name" AssociatedControlID="txtLastName"></asp:Label>
                            <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                        </fieldset>
                    </asp:WizardStep>
                </WizardSteps>
            </asp:Wizard>
        </div>
    </form>
</body>
</html>

My code behind file is as below:

using System;

namespace WizardRadioButtonListDemo
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                rdoServiceType.SelectedIndex = 0;
            }
        }
    }
}
Solution

  • This will work. You were close, but aspnet puts the RadioButton Text in a label next to the input element. So it is not a KeyValuePair you can access with jQuery.

    <script type="text/javascript">
    $(document).ready(function () {
        $('#<%=Wizard1.FindControl("rdoServiceType").ClientID%> input').click(function () {
            var selectedText = $(this).next('label').text();
            var selectedValue = $(this).val();

            alert(selectedText + " - " + selectedValue);
        });
    });
</script>