asked on

Getting SelectedIndex of radiobuttonlist in javascript when using Master Page

Hello Experts,
I have small problem while getting a selectedIndex of radio button list when is in Web Content Page.(.aspx created from Master page)
The following function GetSelectedIndex('rdlistone') works perfectly on simple .aspx page ,when passed a name of radiobuttonlist.
How I can execute following javascript sucessfully on web content page?
it gives error on var selectedIndex = GetSelectedIndex(oneElement.name);

var oneElement = document.getElementById("<%=rdoListRenew.ClientID %>");
var selectedIndex = GetSelectedIndex(oneElement.name);
alert(selectedIndex);
function GetSelectedIndex(Name)
        {
          var radioButtons = document.getElementsByName(Name);
          
          for (var x = 0; x < radioButtons.length; x++) 
          {
            if (radioButtons[x].checked) 
            {                 
                return x;
            }
          }
          return -1;
        }

Open in new window

leakim971

Hello RETAILREALM,

Based on your logic, try the following :

var oneElement = document.getElementById("<%=rdoListRenew.ClientID %>");
	var selectedIndex = GetSelectedIndex(oneElement.name);
	alert(selectedIndex);
	function GetSelectedIndex(Name) {
		var inputs= document.getElementsByTagName(input);
		var selectedIndex = -1;
		try {
			for(var x = 0; x < inputs.length; x++) {
				if ( (inputs[x].type == "radio") && (inputs[x].name == Name) ) {
					selectedIndex++;
					if( inputs[x].checked ) return selectedIndex;
				}
			}
			selectedIndex = -1;
		}
		catch(e) {}
		return selectedIndex;
	}

Open in new window

leakim971

You may use a class for all radio button so line 9 you will be able to replace :

if ( (inputs[x].type == "radio") && (inputs[x].name == Name) ) {

By :

if ( inputs[x].className == className ) {

(so you pass the class name as argument and not the name of the radio button list)

felipevidaurri

Look this previous Question:

https://www.experts-exchange.com/questions/23252489/selectedindex-in-javascript-for-radio-button.html

RETAILREALM

ASKER

Hello Experts,
Thank you for reply.
My problem is different.
As I said the error is on line 2. viz. var selectedIndex = GetSelectedIndex(oneElement.name);
I am not able to get a name propert of oneElement.
Hope I have clearly mentioned the issue.

Note: the RadioButtonList is on Web Content Form.

RETAILREALM

ASKER

if I use var selectedIndex = GetSelectedIndex('ctl00$MainContent$rdoListRenew');
then it works successfully, but I dont want to send a constant, it should be populated. (Name property)

13598

Is "<%=rdoListRenew.ClientID %>" the ID or should it be "rdoListRenew.ClientID" or "%=rdoListRenew.ClientID %"?
Could you post that part of the document?

James Rodgers

javascript is executed top down, unless the page item you are referencing has already been loaded by the browser, before the code is executed you will always get an error

also do not use selectedIndex as a variable name, this is a key word in js

amit_g

Change

var oneElement = document.getElementById("<%=rdoListRenew.ClientID %>");
var selectedIndex = GetSelectedIndex(oneElement.name);

to

var selectedIndex = GetSelectedIndex("<%=rdoListRenew.ClientID %>");

The way radioButtonList is rendered, oneElement would be a Table, not the radiobutton.

RETAILREALM

ASKER

Hi amit_q,

Yes, radioButtonList is rendered as Table, with input tag with type=radio, with same name property.
My question is how I can get the name property of anyof this radio buttons which rendered.

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Users.Master" AutoEventWireup="true" CodeBehind="RenewalReport.aspx.cs" Inherits="Users.RenewalReport" Title="Renewal Report" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
    <asp:ServiceReference Path="Javascripts/ProgressIndicator.js" />
    </Services>
    </asp:ScriptManager> 

<asp:RadioButtonList ID="rdoListRenew" runat="server" 
                CssClass="Form_bold" Visible="false" AutoPostBack="true" EnableViewState="true" onselectedindexchanged="rdoListRenew_SelectedIndexChanged">
                      <asp:ListItem Value="0">All</asp:ListItem>
                      <asp:ListItem Value="1">Renewed Between</asp:ListItem>
                      <asp:ListItem Value="2">Expired Between</asp:ListItem>
                </asp:RadioButtonList>

               <asp:Button ID="btnSearch" runat="server" Text="Search" onclick="btnSubmit_Click" onclientclick="return validate();" />

  
</asp:Content>

Open in new window

RETAILREALM

ASKER

Hi Jester_48,

I have change it according to you, but still no effect.

Hi 13598,
Please find attached code snippet with above posts.

ASKER CERTIFIED SOLUTION

13598

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

amit_g

The ID is renders as the name, at least for the radiobuttonlist control directly hosted in the page. You can check if that is true for your case, if so the code that I posted would work fine. If not, could you post the rendered code?

RETAILREALM

ASKER

Thank you.

amit_g

The accepted answer is exactly same effect as the one that I posted earlier. It is directly using the name instead of using the ClientID. Using the ClientID is always preferred way as the name and ID of the server side control can change depending on how the server controls are hosted. We should never use the server side ID directly in the JavaScript code.