Avatar of najh
najhFlag for United Kingdom of Great Britain and Northern Ireland asked on

Finding the value of a group of ASP.net radio buttons using JavaScript

I have a huge set of radio buttons - arranged in several groups.

I need to be able to check the value of these groups.

So here's a bit of example code:
<div class="possibles">
              <asp:RadioButtonList ID="RadioButtonList1" runat="server"   >
                <asp:ListItem Value="1">a</asp:ListItem>
                <asp:ListItem Value="2">b</asp:ListItem>
                <asp:ListItem Value="3">c</asp:ListItem>
                <asp:ListItem Value="4">d</asp:ListItem>
                <asp:ListItem Value="5">e</asp:ListItem>
              </asp:RadioButtonList>
            </div>


I've got some JavaScript which does a bit of checking to see if any of the items are selected (I don't actually care which one is selected, I just need to know that one is)


Here's how the JavaScript looks:

function findRadioButtonValue(checkBoxGroupToCheck){
           
        for (var i = 0; i < document.getElementById(checkBoxGroupToCheck).length; i++){
                  if (radioButtons[i].checked == true){
                        return radioButtons[i].value;
                  }
            }
      }


however it doesn't seem to recognise the group of radio buttons - it seems to recognise the id provided (RadioButtonList1) in this case as a table element. (which it indeed is when i look in the html source code of the page from the browser).

So how do i reference the group of radio buttons so that i can get them checked?
By the way i use C#, so any vb excerpts won't mean much to me.
ASP.NETC#JavaScript

Avatar of undefined
Last Comment
najh

8/22/2022 - Mon
NetSlut

you have to include the clientID of the control in the javascript.
Use something like below. I'm not 100% sure it's entirely correct ... wrote it out of my head ...

function findRadioButtonValue(){
           
        for (var i = 0; i < document.getElementById(<%= RadioButtonList1.ClientID %>).length; i++){
                  if (document.getElementById(<%= RadioButtonList1.ClientID %>).elements[i].checked == true){
                        return document.getElementById(<%= RadioButtonList1.ClientID %>).elements[i].value;
                  }
            }
      }
ASKER
najh

i read about something like that in some other forums, but i don't understand it - and don't understand how it applies.

if i put that in, won't it hard code it for just that radiobuttonlist1?  I have over 50 to check with this same function.
NetSlut

then do:

function findSelectedRadioButtonValue( radioClientID ){
           
        for (var i = 0; i < document.getElementById(radioClientID ).length; i++){
                  if (document.getElementById(radioClientID >).elements[i].checked == true){
                        return document.getElementById(radioClientID ).elements[i].value;
                  }
            }
      }

then use it like this in javascript:
var selectedID = findSelectedRadioButtonValue( <%= MyRadioList1.ClientID %> );



------------------------------------
The way it works:

Suppose you have a ASP.NET radiobuttonlist with the ID "RBL1"
Then you coudl write:
var selectedID = findSelectedRadioButtonValue( "RBL1" );

but because ASP.NET generates ID's itself, let ASP.NET write the corrdect clientID:

var selectedID = findSelectedRadioButtonValue( <%= MyRadioList1.ClientID %> );
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
najh

I can't seem to get it working, and the ASP.net is writing the same code that i was originally writing.

The thing is that what the <%= RadioButtonList1.ClientID %> is actually writing is RadioButtonList1

So this:
var selectedID = findRadioButtonValue( <%= RadioButtonList1.ClientID %> );
alert("value1: " + selectedID);

comes out of the server as:
var selectedID = findRadioButtonValue( RadioButtonList1 );
alert("value: " + selectedID);


And RadioButtonList1 is actually a table: (this seems to be how the asp.net has rendered it)
             
<div class="possibles">
  <table id="RadioButtonList1" onclick="checkContent2('RadioButtonList1', 'quest1');" border="0">
    <tr>
        <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_0">a</label></td>
    </tr>

<tr>
        <td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_1">b</label></td>
    </tr>

<tr>
        <td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="3" /><label for="RadioButtonList1_2">c</label></td>
    </tr>

<tr>
        <td><input id="RadioButtonList1_3" type="radio" name="RadioButtonList1" value="4" /><label for="RadioButtonList1_3">d</label></td>
    </tr>

<tr>
        <td><input id="RadioButtonList1_4" type="radio" name="RadioButtonList1" value="5" /><label for="RadioButtonList1_4">e</label></td>
    </tr>

  </table>
</div>

NetSlut

read this thread, it's the same problem :

http://forums.asp.net/t/1135617.aspx
ASKER CERTIFIED SOLUTION
najh

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question