Controle JS : détecter si un bouton radio est coché

**Gaetan_** · 11/12/2014, 14h36

Bonjour,
Étant d'un touuuuut petit niveau en JS je bloque sur un truc à priori simple : j'ai un script qui vérifie si mes boutons radio sont cochés.
S'ils ne le sont pas une alerte apparait "'Vous devez sélectionner un choix ..." mais en cliquant sur le OK de la fenêtre le formulaire se valide quand même...
Comment l'en empêcher ?
Merci à vous.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function ChkTransport() {
	var n = document.choixtrans.transport.length;
	var res = false;
	for (i=1;i<=n;i++)
	   if(document.getElementById(i).checked == true)
	return true;
	if (res == false)
		alert('Vous devez sélectionner un choix ...');
  }
</script>

**SpaceFrog** · 11/12/2014, 14h46

http://www.developpez.net/forums/d55...on-formulaire/

**Gaetan_** · 11/12/2014, 14h49

Je suis désole je ne vois pas comment adapter

Code :

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

1
2
3
4
5
6
7
8
 
...
if (res == false)
		alert('Vous devez sélectionner un choix ...');
  return false;
 } else { 
return true;
 }

Et ca ne fonctionne plus du tout

**SpaceFrog** · 11/12/2014, 15h01

tu as mis un return dans le onsubmit ?

**Gaetan_** · 11/12/2014, 15h05

Merci pour ta réponse.

J'essaye de diverses façon même en

Code html :

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

<form method="post" action="commande4.php" OnSubmit='return ChkTransport()'>

**Bovino** · 11/12/2014, 15h08

Tu devrais prendre l'habitude d'entourer tes boucles et tes conditions d'accolades, ça rend bien service...

**Gaetan_** · 11/12/2014, 15h21

J'essaye plusieurs solutions maintenant j'ai le message même quand un radio est coché

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function ChkTransport() {
	var n = document.choixtrans.transport.length;
	var res = false;
	for (i=1;i<=n;i++)
		if(document.getElementById(i).checked == true) {
		return true;
		} else {
		alert('Vous devez sélectionner un choix ...');
		return false;
		}
  }

**SpaceFrog** · 11/12/2014, 15h26

là c'est parce que tu return dès le premier check true ...
incrémente une variable et teste là après la boucle

**Bovino** · 11/12/2014, 15h29

Oui, mais là, ça ne relève plus de JavaScript mais de l'algo...

Tu fais une boucle sur tous tes boutons radio.
A chaque itération, si le bouton est coché, tu renvoies vrai, sinon tu affiches un message et tu renvoies faux.

Ensuite, dans un grand nombre de langages de programmation, que se passe-t-il lors de l'appel de l'instruction return ?

En gros, ce que tu fais est juste de vérifier si le premier radio est coché ou non...

Et au passage

Tu devrais prendre l'habitude d'entourer tes boucles et tes conditions d'accolades, ça rend bien service...

**Bovino** · 11/12/2014, 15h31

incrémente une variable et teste là après la boucle

Même pas besoin en fait.
Dans la boucle, si le bouton radio testé est coché, tu renvoies true. Ensuite, si tu sors de la boucle, c'est qu'aucun bouton n'était coché et il suffit de renvoyer false.

**Gaetan_** · 11/12/2014, 16h01

Merci à vous.
Je revoie ma copie j'arrive à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function ChkTransport() {
	var n = document.choixtrans.transport.length;
	var res = false;
	for (i=1;i<=n;i++) {
		if(document.getElementById(i).checked == true) {
		res=true;
		} 
	}
	if(res==false){
	alert('Vous devez cocher une case!');
	return false;
	}
}

Cela fonctionne est ce correct à tous niveaux ?
Merci

**Bovino** · 11/12/2014, 16h06

Code :

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

1
2
3
4
5
6
7
8
9
10
function ChkTransport() {
	var n = document.choixtrans.transport.length;
	for (i=1;i<=n;i++) {
		if(document.getElementById(i).checked == true) {
		return true;
		} 
	}
	alert('Vous devez cocher une case!');
	return false;
}

Sinon, tes input ont des id numériques ?

**SpaceFrog** · 11/12/2014, 16h07

plus universel:

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
function ChkTransport() {
	var n = document.choixtrans.transport.length;
	var res = 0;
	for (i=1;i<=n;i++) {
		if(document.getElementById(i).checked == true) {
		res++;
		} 
	}
 
	if(res==0){
	alert('Vous devez cocher une case!');
	return false;
	}
 
        return true;
 
}

**Gaetan_** · 11/12/2014, 16h10

Oui mes IDs sont numériques.

Un grand merci pour vos lumières et votre aide.

**Bovino** · 11/12/2014, 16h12

Spaffy, il est question de boutons radio, il ne peut y en avoir qu'un seul maxi de coché, le compteur ne sert pas à grand chose.

Sinon, une version sans avoir besoin d'id :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function ChkTransport() {
	var elems = document.choixtrans.transport,
	    n = elems.length;
	for (i=1;i<=n;i++) {
		if(elems[i].checked) {
		return true;
		} 
	}
	alert('Vous devez cocher une case!');
	return false;
}