Discussion :

[Himotep]

Bonjour,

je cherche un a savoir si au moins un bouton, parmis ma liste de radio bouton, est coché.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form>
<input type="radio" name="methode" value="froid" >Froid</input>
<input type="radio" name="methode" value="chaud" >Chaud</input>
<input type="button" id="submit" value="Add" onClick="verifForm(this.form)">
</form>

Je cherche un JS simple du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function verifForm(formulaire)
{
alert(formulaire.methode.checked);
 
if(formulaire.methode.checked)
{
alert('aucun button coché');
}
else
{
alert('formulaire submit');
}
}

Malheureusement mon alert(formulaire.methode.checked); ne me remonte que undefined, je vois pas ou je me plante ....

Merci de votre aide

[SpaceFrog]

il faut boucler sur la collection

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName('methode')

et verifier si l'un d'entre eux est checked

[Bovino]

Pour compléter la réponse (correcte) de Spaffy,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

formulaire.methode

revient au même mais en plus crade old fashionned que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName('methode')

qui est plus élégant.
Et donc les deux renvoient une collection d'éléments (et non pas un élément unique) et une collection ne possède pas de propriété checked.

[Himotep]

Bovino, j'suis old school :'(

Donc si je comprend bien je suis obligé d'énuméré ma collection et de regarder si un item est "checked"

Malgré mon tout mon code ne fonctionne pas...

[Bovino]

C'est un peu normal en fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(formulaire.methode.checked);

On t'a dit que formulaire.methode renvoie une collection et qu'une collection ne possède pas de propriété checked, donc cette ligne fait planter ton script qui ne va pas plus loin...

Et quand bien même,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (radioGroup[i].checked){
	res = true;
}

ta fonction renvoie true si un bouton est coché, mais dans l'autre fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if(validerRadioGroup())
{
alert('aucun button coché');
}

si tu reçois true, tu considères qu'aucun bouton n'est coché, ça manque de logique !

[Himotep]

il faut boucler sur la collection

Je ne suis pas sur de comprendre. Pour moi se que tu m'indique de faire c'est quelque chose comme sa :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function validerRadioGroup(){
	var radioGroup = document.getElementsByName('methode')
	var res = false;
	var n = radioGroup.length;
	for (var i=0;i<n;i++){
		if (radioGroup[i].checked){
			res = true;
		}
	}
 
	return res;
}
 
function verifForm(formulaire)
{
alert(formulaire.methode.checked);
 
if(validerRadioGroup())
{
alert('aucun button coché');
}
else
{
alert('formulaire submit');
}
}

Cela ne fonctionne pas mieux pour moi, et je trouve sa particulièrement moche d'utiliser document.getElementByName alors que j'ai acces a mon objet par le passage de mon formulaire en argument ( je suis pas sur d'utiliser les bon therme )

Après si j'ai pas d'autre solution j'utiliserai un énumération comme tu l'indique mais apres avoir testé cela n'as pas l'air fonctionnel pour moi.

[SpaceFrog]

normal ton code ne retourne le resultat attendu que si le derbnier check est coché
tu dois soit faire le retur de res des que tu en trouve un coché ..
http://jsfiddle.net/TB8W2/4/

ou les tester tous en incrementant un compteur et tester le compteur à ka fin
http://jsfiddle.net/TB8W2/3/

[Himotep]

J'ai pris la premiere solution et je me suis enfin sortie de mon problème.

edit :

si tu reçois true, tu considères qu'aucun bouton n'est coché, ça manque de logique !

J'me suis appercu de ma connerie après vous avoir lu

Solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function validerRadioGroup(radioGroup){
	var res = false;
	var n = radioGroup.length;
	// Je parcours mes radio afin de voir si une d'elle est à l'etat "checked"
	for (var i=0;i<n;i++){
		if (radioGroup[i].checked){
			res = true;
		}
	}
	return res;
}
 
function verifForm(formulaire)
{
if(!validerRadioGroup(document.getElementsByName('methode'))
{
alert('aucun button coché');
}
else
{
alert('formulaire submit');
formulaire.submit();
}
}

Du coup pour faire propre je souhaite enlever la variable "formulaire" mais je suis obligé de la gardé a cause de "formulaire.submit();".
Y-a-t'il un autre moyen de forcer l'envoi d'un formulaire sans passer par une ligne comme celle-ci ??

[Bovino]

Oui, il peut y avoir une astuce en regroupant les deux fonctions et en gardant une trace du dernier bouton puis en utilisant la propriété form d'un élément de formulaire qui référence le formulaire auquel il appartient.
Ca donnerait par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function verifForm()
{
	var radioGroup = document.getElementsByName('methode'), radioChecked;
	var n = radioGroup.length;
	for (var i=0;i<n;i++){
		if (radioGroup[i].checked){
			radioChecked = radioGroup[i];
		}
	}
	if(!radioChecked){
		alert('Pas bon !');
	}
	else{
		radioChecked.form.submit();
	}
}

[Bovino]

que si le derbnier check est coché

Arg... j'avais pas fait attention à ça !
D'où l'utilité du early return :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function validerRadioGroup(){
	var radioGroup = document.getElementsByName('methode');
	var n = radioGroup.length;
	for (var i=0;i<n;i++){
		if (radioGroup[i].checked){
			return true;
		}
	}
 
	return false;
}