Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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
?
273 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 83

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 83

Expert Comment

by:leakim971
ID: 36563545
RadioButtonList1 is the ID of your radiobutton list else replace it with your own ID
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 83

Expert Comment

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

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

Expert Comment

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

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 83

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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

581 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