[RESOLVED]Send selected item value to JavaScript from RadioList

I have a radioList and upon checking one of the radio buttons I want to provide js with the selected item in order to do some simple hide and show of panels.

<asp:RadioButtonList id="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal" align="left" onclick="sourceType();">
                   <asp:ListItem Text="Observation/Incident/Event" ></asp:ListItem>
                   <asp:ListItem Text="Self-Assessment"></asp:ListItem>
                  <asp:ListItem Text="Internal Audit"></asp:ListItem>
                  <asp:ListItem Text="External Audit(on CE)"></asp:ListItem>
                  <asp:ListItem Text="Supplier Audit/Surveillance"></asp:ListItem>
                  <asp:ListItem Text="Customer Complaint"></asp:ListItem>
                  <asp:ListItem Text="Other"></asp:ListItem>
                </asp:RadioButtonList>
     function sourceType(){
           
             var source = document.getElementById('<%=rdlSource.ClientID%>');
                alert(source);
</script>

Source is not fetching the correct item and gets the id of the table.
this is what the page source shows me. 

<td colspan="5">
              <table id="MainContent_nestedContent_rdlSource" Name="ListSource" align="left">
	<tr>
		<td><input id="MainContent_nestedContent_rdlSource_0" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Observation/Incident/Event" /><label for="MainContent_nestedContent_rdlSource_0">Observation/Incident/Event</label></td><td><input id="MainContent_nestedContent_rdlSource_1" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Self-Assessment" /><label for="MainContent_nestedContent_rdlSource_1">Self-Assessment</label></td><td><input id="MainContent_nestedContent_rdlSource_2" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Internal Audit" /><label for="MainContent_nestedContent_rdlSource_2">Internal Audit</label></td><td><input id="MainContent_nestedContent_rdlSource_3" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="External Audit(on CE)" /><label for="MainContent_nestedContent_rdlSource_3">External Audit(on CE)</label></td><td><input id="MainContent_nestedContent_rdlSource_4" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Supplier Audit/Surveillance" /><label for="MainContent_nestedContent_rdlSource_4">Supplier Audit/Surveillance</label></td><td><input id="MainContent_nestedContent_rdlSource_5" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Customer Complaint" /><label for="MainContent_nestedContent_rdlSource_5">Customer Complaint</label></td><td><input id="MainContent_nestedContent_rdlSource_6" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Other" /><label for="MainContent_nestedContent_rdlSource_6">Other</label></td>
	</tr>
</table>

Really confused, i have seen many solutions and none of them have worked out. Please help :) Thank you

You can use Jquery to get the selected value in radiobutton list.

Please try with the below code

 <asp:RadioButtonList ID="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal"
            align="left" onclick="sourceType(this);">
            <asp:ListItem Text="Observation/Incident/Event"></asp:ListItem>
            <asp:ListItem Text="Self-Assessment"></asp:ListItem>
            <asp:ListItem Text="Internal Audit"></asp:ListItem>
            <asp:ListItem Text="External Audit(on CE)"></asp:ListItem>
            <asp:ListItem Text="Supplier Audit/Surveillance"></asp:ListItem>
            <asp:ListItem Text="Customer Complaint"></asp:ListItem>
            <asp:ListItem Text="Other"></asp:ListItem>
        </asp:RadioButtonList>

JQuery Code

 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            function sourceType(rbl) {
            //Get the selected value from radiobuttonlist
                var selectedvalue = $("#" + rbl.id + " input:radio:checked").val();
                alert(selectedvalue);
            }
        </script>

if you want a pure javascript solution then you can use the below code

<script>

            function sourceType() {
            //Get the Radiobuttonlist object here
                var radioButtons = document.getElementsByName("rdlSource");
                //Loop through all items in radiobuttonlist
                for (var x = 0; x < radioButtons.length; x++) {
                //check if radiobutton is checked or not
                    if (radioButtons[x].checked) {
                    //show the value as alert
                        alert(radioButtons[x].value);
                    }
                }
            }

        </script>
        <asp:RadioButtonList ID="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal"
            align="left" onclick="sourceType();">
            <asp:ListItem Text="Observation/Incident/Event"></asp:ListItem>
            <asp:ListItem Text="Self-Assessment"></asp:ListItem>
            <asp:ListItem Text="Internal Audit"></asp:ListItem>
            <asp:ListItem Text="External Audit(on CE)"></asp:ListItem>
            <asp:ListItem Text="Supplier Audit/Surveillance"></asp:ListItem>
            <asp:ListItem Text="Customer Complaint"></asp:ListItem>
            <asp:ListItem Text="Other"></asp:ListItem>
        </asp:RadioButtonList>

Hello A2H, 
Thank you for your response. I have tried your javascript code and I seem to get the length of 0 for radioButtons.length. 

Hi TheMiniShaq,

Please try to use the following code.

    <script type="text/javascript">
        function sourceType() {
            //Get the Radiobuttonlist object here
            var radioButtons = document.getElementsByName("rdlSource");

            var RadioButtonS = document.getElementsByTagName('input');
            //Loop through all items in radiobuttonlist
            for (var x = 0; x < radioButtons.length; x++) {
                //check if radiobutton is checked or not
                if (radioButtons[x].checked) {
//show the value as alert var lbl = RadioButtonS[x + 1].parentElement.getElementsByTagName('label'); alert(lbl[0].innerHTML); } } } </script> <div> <asp:RadioButtonList ID="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal" align="left" onclick="sourceType();"> <asp:ListItem Text="Observation/Incident/Event" Value="0"></asp:ListItem> <asp:ListItem Text="Self-Assessment" Value="1"></asp:ListItem> <asp:ListItem Text="Internal Audit" Value="2"></asp:ListItem> <asp:ListItem Text="External Audit(on CE)" Value="3"></asp:ListItem> <asp:ListItem Text="Supplier Audit/Surveillance" Value="4"></asp:ListItem> <asp:ListItem Text="Customer Complaint" Value="5"></asp:ListItem> <asp:ListItem Text="Other" Value="6"></asp:ListItem> </asp:RadioButtonList> </div>

Best Regards,
Dillion

TheMiniShaq

Hello A2H, 
Thank you for your response. I have tried your javascript code and I seem to get the length of 0 for radioButtons.length. 

The above code is working fine for me. Looks like the issue is with how we are referring the radiobutton list control as your control is inside a contentplaceholder. Try using the control clientid to refer the radiobutton list

Please try with the below code

 <script>

            function sourceType() {
            //Get the Radiobuttonlist object here
                var radioButtons = document.getElementsByName('<%=rdlSource.ClientID%>');
                //Loop through all items in radiobuttonlist
                for (var x = 0; x < radioButtons.length; x++) {
                //check if radiobutton is checked or not
                    if (radioButtons[x].checked) {
                    //show the value as alert
                        alert(radioButtons[x].value);
                    }
                }
            }

        </script>

Leave a Reply