Récupérer valeur d'un radiobuttonlist en javascript

Version imprimable

Bonjour

Question apparemment récurrente, mais je n'ai encore pas trouvé mon bonheur :
J'ai besoin de récupérer en javascript (côté client, donc) la valeur d'un radiobuttonlist. Un peu partout sur le net, j'ai trouvé ce genre de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <script language="javascript" type="text/javascript"> function GetRDBValue() { var radio = document.getElementsByName('rdbGender'); for (var i = 0; i < radio.length; i++) { if (radio[i].checked) { alert(radio[i].value); } } } </script> <asp:Panel ID="Panel1" runat="server"> <asp:RadioButtonList ID="rdbGender" runat="server"> <asp:ListItem Text="Male" Value="1"></asp:ListItem> <asp:ListItem Text="Female" Value="2"></asp:ListItem> </asp:RadioButtonList> </asp:Panel> <input id="Button4" type="button" value="?" onclick="GetRDBValue()" />
Ca marche très bien, à la condition qu'il n'y ait pas de masterPage. dans le cas contraire, ASP renomme les radiobutton à sa sauce (dans le style ctl00$mainContent$rdbGender) et le script ne fonctionne plus.

Quelqu'un peut-il me dire comment accéder dans ce cas à la valeur du radiobuttonlist ?

27/10/2010, 17h29
Ramajb

Salut,
Tu essaie d’accéder a une fonction de cote client a l'aide de l’événement OnClick qui permet d’exécuter une fonction de cote serveur.
Si tu veux accéder a une fonction javascript, utilise plutôt l'evt OnClientClick

a+

Hello,

tu peux faire ca

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<script language="javascript" type="text/javascript">
 
        function GetRDBValue(var id)
        {
           var radio = document.getElementsByName(id);
            for (var i = 0; i < radio.length; i++)
            {
                if (radio[i].checked)
                {
                     alert(radio[i].value);
                }
             }
         }
     </script>
 
 
<asp:Panel ID="Panel1" runat="server">
        <asp:RadioButtonList ID="rdbGender" runat="server">
            <asp:ListItem Text="Male" Value="1"></asp:ListItem>
            <asp:ListItem Text="Female" Value="2"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>
 
<input id="Button4" type="button" value="Submit" onclick="GetRDBValue('<%= rdbGender.ClientID %>')" />

Merci pour vos réponses

@Ramajb : Il s'agit d'un input HTML, non d'un asp:button. Pour un élément HTML, l'évènement onClientClick n'existe pas et génèrera une erreur.

@gyzmau : non plus.
Dans une page avec master page, le code généré par

Code:

1
2
3
4
5
6
<asp:Panel ID="Panel1" runat="server">
        <asp:RadioButtonList ID="rdbGender" runat="server">
            <asp:ListItem Text="Male" Value="1"></asp:ListItem>
            <asp:ListItem Text="Female" Value="2"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>

Donnera quelque chose comme :

Code:

1
2
3
4
5
6
7
<table id="mainContent_rdbGender">
        <tr>
            <td><input id="mainContent_rdbGender_0" type="radio" name="ctl00$mainContent$rdbGender" value="1" /><label for="mainContent_rdbGender_0">Male</label></td>
        </tr><tr>
            <td><input id="mainContent_rdbGender_1" type="radio" name="ctl00$mainContent$rdbGender" value="2" /><label for="mainContent_rdbGender_1">Female</label></td>
        </tr>
    </table>

et donc,
<%= rdbGender.ClientID %> fera référence à la table, non aux inputs (dont nous avons besoin non pas de l'id, mais du name, qui plus est.

La solution que j'ai adopté dans l'immédiat, est la suivante, en attendant peut_être une suggestion meilleure :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 function GetRDBValue()
        {
 
            var radio = document.getElementById('<%=rdbGender.ClientID %>');
 
            for (var i = 0; i < radio.getElementsByTagName("input").length; i++)
            {
 
                if (radio.getElementsByTagName("input")[i].checked)
                {
 
                    alert(radio.getElementsByTagName("input")[i].value);
                }
 
            }
 
        }

Oki je vois j'ai pas osé te proposer la solution jquery ;)
J'adore jquery mais si c'est juste pour récupérer la valeur d'un radio ,checké ou pas, j'avoue pas trop d'intérêt
mais sinon en jquery ca donnerais ca:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script language="javascript" type="text/javascript"> function GetRDBValue(id) { alert($("input:checked","#"+id).val()); } </script> <asp:Panel ID="Panel1" runat="server"> <asp:RadioButtonList ID="rdbGender" runat="server"> <asp:ListItem Text="Male" Value="1"></asp:ListItem> <asp:ListItem Text="Female" Value="2"></asp:ListItem> </asp:RadioButtonList> </asp:Panel> <input id="Button4" type="button" value="Submit" onclick="GetRDBValue('<%= rdbGender.ClientID %>')" />
petite demo ici:
http://jsfiddle.net/3DnUF/1/