Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2011-09-19
9
Medium Priority
?
272 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

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…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
Screencast - Getting to Know the Pipeline
Suggested Courses

963 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