Verification de Formulaire bouton radio

Version imprimable

Bonjour à tous,
j'ai plusieurs inputs type radio et j'aimerai savoir si un choix est sélectionné:
Dans le but de vérifier si toutes mes question on était répondu avant l'envoi du formulaire
mes inputs;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<input type="radio" name="question1" value="1" />
<input type="radio" name="question1" value="2" />
<input type="radio" name="question1" value="3" />
<input type="radio" name="question1" value="4" />
 
<input type="radio" name="question2" value="1" />
<input type="radio" name="question2" value="2" />
<input type="radio" name="question2" value="3" />
<input type="radio" name="question2" value="4" />
 
etc....

et mon Javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function valid_form(thisForm) { 
	tmp = 'question1'; // mit à un pour faire un test je ferai la boucle plus tard
	for(j = 0; j < document.formulaire.tmp.length; j++){
		if(!document.formulaire.tmp[j].checked) {
			alert( "Veulliez répondre à toutes les questions");
			return false;
                 }	else {
				alert( "Question Répondu"); 
				return false; // mit a false expret pour empecher l envoie pendant la periode de test
		         }
	 } 
}

sauf que mon JS ne marche pas du tout... Quelqu'un serait-il m'aider?

Merci

Cordialement

Petit modif, j'ai essaie en virant les document.formulaire vu que cela ce passe deja dans le formulaire (thisFrom)
donc j'ai:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function valid_form(thisForm) { var tmpo = "question1"; for(j = 0; j < (tmpo.length); j++){ if(!tmpo[j].checked) { alert("Les boutons radios doivent etre tous remplit"); return false; } else if(tmpo[j].checked){ alert("Bouton Selectionné"); return false; } else{ alert("le script n'a pas marché"); return false; } } }
Mais encore un petit probleme: dans tout les cas (bouton radio selectionné ou non) il affiche 'Les boutons radios doivent etre tous remplit' donc si il est checked il passe quand meme en non checked...

Citation:

Envoyé par bastian06n

Code:

1
2
3
4
5
6
 
function valid_form(thisForm) { 
 
	 var tmpo = "question1";
	for(j = 0; j < (tmpo.length); j++){
		if(!tmpo[j].checked) {

Comme ca il me semble que t'as fait tmpo = "question1" donc tmpo et une chaine de caractères et donc , je pense que si tu fait thisForm[tmpo] (tas ton objet radio cette fois) ça pourrait marcher.

Et dans ton premier code tu fais form.tmp[j].checked ca marche pas car il pense récupérer un élément appelé tmp dans le form il faut que tu fasse dans ce cas-là form[tmp] pour qu'il te retourne l'élément dont le nom est le contenu de tmp et no "tmp", je suis tombé plusieurs fois sur ce type de pièges.

moi j'ai fait comme 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<form id="leForm" onsubmit="return validForm(this);">
 
<input type="radio" name="question1" value="1" /><br />
<input type="radio" name="question1" value="2" /><br />
<input type="radio" name="question1" value="3" /><br />
<input type="radio" name="question1" value="4" /><br />
 <br /><br />
<input type="radio" name="question2" value="1" /><br />
<input type="radio" name="question2" value="2" /><br />
<input type="radio" name="question2" value="3" /><br />
<input type="radio" name="question2" value="4" /><br />
 
<input type="submit" value="go"/>
</form>
<script type="text/javascript">
function validForm(form){
 
	//liste des noms des radios, facile à mantenir
	var questions = ["question1","question2"];
 
	//pour chaque name de radio dans la liste
	for(var i in questions){
		//on recupère l'objet radio
		var radio = form[questions[i]];
		//si un seul radio n'est pas conforme on s'arrête et on renvoie false
		if(isRadioChecked(radio) == false)
			return false;
	}
	//si on est ici, ça veut dire qu'on a vérifié tous les radios
	//et aucun n'a retourné false donc tout va bien (au moins un radio checked par name)
	return true;
 
}
function isRadioChecked(radio){
	//étant donné que plusieurs radio possèdent le même name,
	// on a une liste de inputs radio pour chaque name
	var c = radio.length;
	//on parcourt l'ensemble des inputs pour un name donné
	while(c>0){
		c--;
		//si il y a un radio checked tout est ok pour le name courant,
		//donc on s'embete pas et on renvoie true;
		if(radio[c].checked) 
			return true;
	}
	//si on n'a pas renvoyé true avant aucun input pour un name donné est checked
	return false;
}
 
</script>

Ca marche sur IE et chrome, pas testé sur FF

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function valid_form(thisForm) { 
 
	var tmp= "question1";
	for(j = 0; j < (thisForm[tmp].length); j++){
		if(thisForm[tmp][j].checked == true) {
			alert("button selectionné");
			return false;
		}	else if(thisForm[tmp][j].checked == false) {
				alert("Les boutons radios doivent etre tous remplit");
				return false;
			}else {
				alert("script pas marché"); 
				return false;
			} 
	} 
}

Super Ça marche !!! Merci beaucoup j'aurais jamais trouvé sinon :p

14/07/2010, 12h28
bastian06n

En faite non..... ca marche si je sélectionne le premier bouton mais si je sélectionne les autres ca fait comme si il n'était pas coché
14/07/2010, 12h42
bastian06n

bon je vais utiliser ton code alors merci bcp du coup de main
14/07/2010, 20h46
polkduran

Citation:

Envoyé par bastian06n

En faite non..... ca marche si je sélectionne le premier bouton mais si je sélectionne les autres ca fait comme si il n'était pas coché

Ton code ne marche pas car dans ta boucle si tu truove un radio checked ok il te renvoie true, mais le problème c'est que si tu trouve un radio pas sélectionné il te renvoie false, du coup au premier radio pas sélectionné il renvoie false et il ne verifie même pas les autres, tu aurais dû mettre ton "return false" à la sortie de la boucle, c'est à dire si ta boucle n'a jamais renvoyé true, donc aucun radio sélectionné.

Et aussi ton code tu le fais pour un seule radio, tu dois inclure une autre boucle pour chaque "name" différent dans ton form.
14/07/2010, 22h59
bastian06n

Merci polkduran pour ces explications, je comprends mieux maintenant pourquoi ca fonctionnait pas :/

En me servant de ton exemple je me demandais si il était possible de remplir le tableau

Code:

var questions = ["question1","question2"];

dynamiquement avec une requête sql afin de les sélectionner dans une table ?

J'ai lu sur internet que l'on pouvait le faire avec AJax qui appellerai un script php mais je me demande bien comment les variable php pour être réutilisées dans le tableau javascript.
14/07/2010, 23h11
bastian06n

Ou plustôt appeler la fonction validform avec 2 paramètre ou le 2eme paramètre serai le résultat de la requête SQL en php mais a ce moment là; est ce possible de déclarer un tableau (je crois que ca s'appel un vecteur en php) qui soit compatible (au niveau de la forme) avec les tableaux javascript ?

Le problème, bon ce n'est pas un problème mais la différence entre js et php c'est que js est côté client et php côté serveur, c'est à dire que tu prépares avec php ce que tu veux envoyer au navigateur.

tu peux te servir de php pour générer du js dynamiquement mais une fois que tout est envoyé au client (html,js,css) tu peux plus faire appel au php qui t'a généré tout ça.

je ne sais pas par contre comment tu génères tes radios, tu les mets en dur en html ou tu les fais en php,

je pense qu'au lieu de vouloir mélanger génération de js en php et js côté client tu peux tu faire tout en js, parce que même si c'est pas très compliqué de le faire si t'as pas l'habitude tu peux passer bcp de temps à le faire.

donc en js tu peux d'abord récupérer tous les names des radios dans un tableau
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function getRadios(form){ //on recupère tous les inputs var is = form.getElementsByTagName("input"); //ici on va mettre tous les names des radios var tab = new Array(); for(var i = 0;i<is.length;i++){ var t = is[i].getAttribute("type"); //si le type de l'input est radio if(t=="radio"){ //on recupère le name du radio var name = is[i].getAttribute("name"); //s'il n'existe dans le tableau on l'y insère if(!tab.contains(name)){ tab.push(name); } } } return tab; }
dans cette fonction on a utilisé une méthode de Array qui en réalité n'existe pas Array.contains(element), donc il faut la redéfinir d'abord;
Code:

1 2 3 4 5 6 7 8 9 10 if(!Array.contains) Array.prototype.contains = function (element) { for (var i = 0; i < this.length; i++) { if (this[i] == element) { return true; } } return false; }
et finalement dans la fonction où on utilisait le tableau de radios on fait
Code:

1 2 3 4 5 6 function validForm(form){ //liste des noms des radios, facile à mantenir var questions =getRadios(form); .......

15/07/2010, 00h45
bastian06n

re =)

Citation:

je ne sais pas par contre comment tu génères tes radios, tu les mets en dur en html ou tu les fais en php,

je les affichage dynamiquement en fonction d'un table SQL en php,

Citation:

tu peux te servir de php pour générer du js dynamiquement mais une fois que tout est envoyé au client (html,js,css) tu peux plus faire appel au php qui t'a généré tout ça.

J'étais en train de coder quelque chose comme cela. Mais je suis arriver au problème de l'ajout de deux tableau (pour des questions qui sont dans deux table SQL différentes) et là, panique, j'avais comme idée en tête une fonction qui aller echo un array dans le js avec mes valeur obtenu en SQL trop de boulot effectivement. :aie:

En tout cas ta solution me semble beaucoup plus pratique car imaginons que j'ai une troisième table de questions je vais devoir modifier tout monde code php dans le javascript alors qu'avec le tiens pas la peine :marteau:

Tes Fonctions tournent à merveilles ! Un énorme Merci à toi tu me débloque d'une sacré situation merci merci merci