Solved

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

Posted on 2011-09-19
9
263 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
  • 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Host asp.net pages 5 25
Angular JS Route 3 45
Split in Javascript 5 30
Master Content Pages, WebForms, and Session Variables 1 29
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Delivering innovative fully-managed cloud services for mission-critical applications requires expertise in multiple areas plus vision and commitment. Meet a few of the people behind the quality services of Concerto.
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

932 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now