Récupérer la valeur d'un bouton radio coché en javascript

Version imprimable

J'essaie de récupérer la valeur d'un bouton radio coché pour pouvoir faire des tests sur ce qui doit être affiché, mais malheureusement je n'y arrive.

Pourriez vous m'aider s'il vous plait ?

Fonction javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function returnPreview(){
 
	var matin_Apres = document.getElementById('matinOuApres').checked;
	var matin_Apres2 = document.getElementById('matinOuApres').value;
	//alert("matin_Apres "+matin_Apres);
	//alert("matin_Apres2 "+matin_Apres2);
 
 
	if (document.forms["popinDemiAbsPreview"].elements["matinOuApres"].checked == true ){
		alert("bouton radio 1 : "+document.forms["popinDemiAbsPreview"].elements["matinOuApres"].value);
	}
 
}

Formulaire

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
30
31
32
33
34
35
36
37
 
	<tr>
			<td align="center">
			<s:form name="popinDemiAbsPreview">	
				<s:hidden name="idPersonneDemiAbs" name="idPersonneDemiAbs" value="" />
				<s:hidden name="indexDemiAbs" name="indexDemiAbs" value="" />			
				<table cellpadding=5 style="width:600;align:center;" class="cadre">
 
					<tr>
						 <td  style="text-align: center;">
						 	Présent le : 
						 </td>
					</tr>
					<tr>
						 <td  style="text-align: center;">
						 	<input type = "radio" name='matinOuApres' id='matinOuApres' value='matin'/>matin
						 </td>
					</tr>
					<tr>
						 <td  style="text-align: center;">
						 	<input type = "radio" name='matinOuApres' id='matinOuApres' value='apres'/>après midi
						 </td>
					</tr>
 
					<tr>
						<td align="center">	
							<input type="button" value="Valider" onclick="returnDemiAbsValue(this.form.matinOuApres);">					
						<br/><br/>
						</td>
					</tr>				
				</table>
				</s:form>
				<br/><br/>
 
 
			</td>
		</tr>

je ne rentre pas dans mon alerte ...:/

30/10/2012, 14h45
Gannox

Salut,

Quand est-ce que tu appelles la fonction nommée returnPreview() dans ton formulaire ?
Je ne vois qu'une seule fonction dans ce formulaire, accessible par un click de bouton, mais qui se nomme returnDemiAbsValue().
30/10/2012, 14h54
Invité

Bonjour,
les 2 boutons radio doivent avoir le même name (OK), mais PAS le même id (id='matinOuApres') !
30/10/2012, 15h06
Bovino

Surtout, pour récupérer le bouton qui est sélectionné, il faut boucler sur tous ceux ayant le même name et vérifier individuellement la propriété checked.

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
30
31
32
33
34
35
<form name="formulaire" .......> 
	<table>
	<tr>
			<td align="center">
				<table cellpadding=5 style="width:600;align:center;" class="cadre">
 
					<tr>
						 <td  style="text-align: center;">
						 	Présent le : 
						 </td>
					</tr>
					<tr>
						 <td  style="text-align: center;">
						 	<input type="radio" name="matinOuApres" id="matinOuApres1" value="matin" onchange="returnMatinOuApres();"/>matin
						 </td>
					</tr>
					<tr>
						 <td  style="text-align: center;">
						 	<input type="radio" name="matinOuApres" id="matinOuApres2" value="apres" onchange="returnMatinOuApres();"/>après-midi
						 </td>
					</tr>
 
					<tr>
						<td align="center">	
							<input type="button" value="Valider" onclick="returnMatinOuApres();">					
						<br/><br/>
						</td>
					</tr>				
				</table>
 
 
			</td>
		</tr>
	</table>
</form>

Comme tu n'as que 2 boutons, la solution simple (avec id nécessaires) :

Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function returnMatinOuApres(){
	if(document.getElementById('matinOuApres1').checked){
		var valeur = document.getElementById('matinOuApres1').value;
	} else { // si ce n'est pas l'un, c'est l'autre
		var valeur = document.getElementById('matinOuApres2').value;
	}
	alert(valeur + ' a été sélectionné');
}
</script>

Sinon, la solution générale (avec name seul ; les id sont inutiles) :
(c'est la solution préconisée par :hola: Maître Bovino )

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function returnMatinOuApres(){
	var valeur = '';
	for (i=0; i<document.formulaire.matinOuApres.length; i++) {
		if (document.formulaire.matinOuApres[i].checked) {
			valeur = document.formulaire.matinOuApres[i].value;
		}
	}
	alert(valeur + ' a été sélectionné');
}
</script>

document.formulaire.matinOuApres.xxx :
- formulaire est le "name" du formulaire : <form name="formulaire" .......>
- matinOuApres est le "name" des boutons radio : <input type="radio" name="matinOuApres" ....... />

31/10/2012, 09h28
leara500

Merci pour toutes vos réponses ! !
Ca marche comme je le souhaite :)