• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2397
  • Last Modified:

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

0
RETAILREALM
Asked:
RETAILREALM
  • 5
  • 3
  • 2
  • +3
1 Solution
 
leakim971PluritechnicianCommented:
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

0
 
leakim971PluritechnicianCommented:
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)
0
 
felipevidaurriCommented:
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
RETAILREALMAuthor Commented:
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.



0
 
RETAILREALMAuthor Commented:
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)
0
 
13598Commented:
Is "<%=rdoListRenew.ClientID %>"  the ID or should it be "rdoListRenew.ClientID"  or  "%=rdoListRenew.ClientID %"?
Could you post that part of the document?
0
 
James RodgersWeb Applications DeveloperCommented:
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
0
 
amit_gCommented:
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.
0
 
RETAILREALMAuthor Commented:
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

0
 
RETAILREALMAuthor Commented:
Hi Jester_48,

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

Hi 13598,
   Please find attached code snippet with above posts.
0
 
13598Commented:
Could you quickly try this and see if it works?
function getSelectedIndex() {
        var radioButtons = document.getElementsByName("rdoListRenew");
        for (var x = 0; x < radioButtons.length; x ++) {
          if (radioButtons[x].checked) {
            alert("You checked " + radioButtons[x].id + " which has the value " + radioButtons[x].value);
          }
        }
      }
0
 
amit_gCommented:
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?
0
 
RETAILREALMAuthor Commented:
Thank you.
0
 
amit_gCommented:
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.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
  • 3
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now