Solved

How do I determine which radio button is selected in a radiobutton list using javascript

Posted on 2011-09-19
9
268 Views
Last Modified: 2012-05-12
Hi,

I'm quite new to javascript so I'm having alot of problems figuring this out. On my web form I am trying to figure out how to use Javascript to determine which radio button is selected from a radio button list.  Once I know which radio list item is selected, I then want to display various panels based on the selection.

Please see attached code. I would like to have a javascript solution not jquery.

Thanks
var selectedButton = getSelectedRadioButton("TypeSelection")

var getSelectedRadioButton = function (controlName) {
    for (var i = 0; i <= controlName.lenght; i++)
        if (controlName[i].checked) {
            return controlName[i];
        }
        else
            return "";
}

Open in new window

0
Comment
Question by:obb-taurus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36563072
use (replace your current code by) :

<script type="text/javascript" language="javascript">
window.onload = function() {
      var rbs = document.getElementsByName("<%= RadioButtonList1.ClientID %>").getElementsByTagName("input");
      for(var i=0;i<rbs.length;i++) {
          if( rbs[i].type == "radio" ) {
              rbs[i].onclick = function() {
                  var idPanel = this.value; // the value of the radio button is the id of the panel to hide
                  document.getElementById(idPanel).style.display = "block";
              }
          }
      }
}
</script>

Open in new window

0
 

Author Comment

by:obb-taurus
ID: 36563452
I tried your code and get the following error.
Object doesn't support property or method 'getElementsByTagName'

I should have mentioned that the radio button list is in a content page based on a master page and the script is located in a external file.  I have also registered the external file from the code behind as follows:

Page.ClientScript.RegisterClientScriptInclude("clearform", ResolveUrl(@"Scripts\JSScript.js"));
btnClear.Attributes.Add("onclick", "return clearInvoiceItemControls();");

I have attached to a button on the form for testing.  I will be using this javascript function for clearing the form as well once I get this part figured out.

Not sure how much of a difference the above will make in your code sample.

Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36563545
RadioButtonList1 is the ID of your radiobutton list else replace it with your own ID
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:obb-taurus
ID: 36563567
When I tried your code the first time I altered the code to match my name so in my case it would be:
transactionTypeSelection.ClientID and this generated the error.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36563588
my bad, we need to add [0] :

var rbs = document.getElementsByName("<%= transactionTypeSelection.ClientID %>")[0].getElementsByTagName("input");
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36563592
Correction :
var rbs = document.getElementById("<%= transactionTypeSelection.ClientID %>").getElementsByTagName("input");
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36563653
test page :

<%@ Page Title="Page d'accueil" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication14._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" language="javascript">
    var panelId = ["<%= Panel1.ClientID %>", "<%= Panel2.ClientID %>", "<%= Panel3.ClientID %>"]
    window.onload = function () {
        var rbs = document.getElementById("<%= transactionTypeSelection.ClientID %>").getElementsByTagName("input");
        for (var i = 0; i < rbs.length; i++) {
            if (rbs[i].type == "radio") {
                rbs[i].onclick = function () {
                    var idPanel = this.value;
                    switch (idPanel) {
                        case "1":
                            document.getElementById(panelId[0]).style.display = "block";
                            document.getElementById(panelId[1]).style.display = "none";
                            document.getElementById(panelId[2]).style.display = "none";
                            break;
                        case "2":
                            document.getElementById(panelId[0]).style.display = "none";
                            document.getElementById(panelId[1]).style.display = "block";
                            document.getElementById(panelId[2]).style.display = "none";
                            break;
                        case "3":
                            document.getElementById(panelId[0]).style.display = "none";
                            document.getElementById(panelId[1]).style.display = "none";
                            document.getElementById(panelId[2]).style.display = "block";
                            break;
                    }
                }
            }
        }
    }
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:RadioButtonList ID="transactionTypeSelection" 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>
<asp:Panel ID="Panel1" runat="server" style="display:none">HELLO FROM PANEL 1</asp:Panel>
<asp:Panel ID="Panel2" runat="server" style="display:none">HELLO FROM PANEL 2</asp:Panel>
<asp:Panel ID="Panel3" runat="server" style="display:none">HELLO FROM PANEL 3</asp:Panel>
</asp:Content>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36563670
0
 

Author Closing Comment

by:obb-taurus
ID: 36568604
Thanks so much for the awesome help.
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question