Link to home
Start Free TrialLog in
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.
Avatar of NetSlut
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;
                  }
            }
      }
Avatar of najh

ASKER

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.
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 %> );
Avatar of najh

ASKER

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>

read this thread, it's the same problem :

http://forums.asp.net/t/1135617.aspx
ASKER CERTIFIED SOLUTION
Avatar of najh
najh
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial