message d'alerte en "live" à la saisie dans un formulaire

Version imprimable

07/02/2007, 17h47
arnogef

message d'alerte en "live" à la saisie dans un formulaire

Bonjour,

voilà mon probleme :
j'ai un formulaire dans lequel l'utilisateur renseigne 3 valeurs numériques (a,b,c)
je voudrais, une fois qu'il a terminé de taper ces valeurs, faire un controle suivant une formule (x, y,z étant 3 variables php connues) :
si (x+a) + 3(y+b) +5(z+c)>15
alors j'affiche en rouge un message d'alerte sur le formulaire, à coté des 3 champs a,b,c
sinon, je ne fais rien.
Je ne veux pas que ce test soit bloquant pour l'utilisateur, mais juste qu'il ait une alerte, en direct live à la saisie...voyez vous comment je peux faire cela?

Merci
07/02/2007, 18h18
Sancho_54

Tu peux le faire tous simplement avec la fonction alert("Ton message"); voila :)
07/02/2007, 18h22
arnogef

tout simplement...hem pas si sur
j'ai déjà fait quelques fonctions javascript en utilisant alert 'blabla'
mais

1) c'était au moment de l'envoi du formulaire, alors que là je voudrais un message d'alerte au moment ou on a finit de taper les valeurs (avec un recalcul à chaque modification d'une des 3 valeurs)
2) je ne voudrais pas une boite de dialogue mais juste un texte qui s'affiche en rouge à coté des champs

je crois que c'est possible mais je ne sais pas comment on peut faire ça..
quelqu'un aurait une idée?

Bonjour,

Code:

1
2
if ((parseFloat(x)+parseFloat(document.getElementById('a').value)) + 3*(parseFloat(y)+parseFloat(document.getElementById('b').value)) +5*(parseFloat(z)+parseFloat(document.getElementById('c').value))>15)
alert('Pas Glop !!');

parseInt() si tu es sûr de n'avoir que des nb entiers ...

A+

07/02/2007, 19h03
arnogef

merci
oui ce seront des nombres entiers...
2 questions par rapport à ton code :
1) cette alerte n'est-elle pas bloquante? je veux juste que l'utilisateur soit averti mais que ca ne l'empeche pas d'aller sur la page suivante (eventuellement, qu'il ait une boite de dialogue qui lui demande s'il veut continuer ou non)
2) puis je faire appel dans mon javascript aux variables php x,y,z directement (genre $nb1,$nb2,$nb3 ?)

merci

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
52
53
54
55
56
<html>
<head>
<script>
 
var x=0;   	// echo "var x=".$x;
var y=0;	// $y	
var z=0;	// $z
 
var is_num = new RegExp("^[0-9]+$");
 
function verifChp( chp ) {
 
	if( !is_num.test( chp.value ) ) {
		chp.value = "";
		return 0;
	}	
	else return parseInt(chp.value);
 
}
 
function calcul() {
 
	var objErr = document.getElementById('err');
	var objDet = document.getElementById('detCalcul');
	var objF = document.f;
	var a = verifChp(objF.a);
	var b = verifChp(objF.b);
	var c = verifChp(objF.c);
 
 
	if( eval( (x+a)+3*(y+b)+5*(z+c)>15 ) ) objErr.innerHTML = "erreur...";
	else objErr.innerHTML = "";
 
	objDet.innerHTML = "(x+a)+3x(y+b)+5x(z+c)<br />";
	objDet.innerHTML += "= ("+x+"+"+a+")+3x("+y+"+"+b+")+5x("+z+"+"+c+")<br />";
	objDet.innerHTML += "= "+eval((x+a)+3*(y+b)+5*(z+c));
}
 
 
 
 
</script>
</head>
 
<body>
 
<form name=f>
a =<input type=texte name=a value=0 onkeyup="calcul();" /><br />
b =<input type=texte name=b value=0 onkeyup="calcul();" /><br />
c =<input type=texte name=c value=0 onkeyup="calcul();" /><br />
</form>
 
<div style="color: red;" id=err></div><br />
<div id=detCalcul></div>
</body>
</html>

08/02/2007, 00h44
arnogef

salut
merci, c'est le genre de code qu'il faut je pense
par contre je l'ai essayé comme ça et il ne se passe rien...
je me pose donc quelques questions par rapport à ton code

1) quelles sont les roles exacts des variables
detCalcul et err ?
tu fais un document.getElementById sur ces variables mais pourtant ce ne sont pas des objets du formulaire...

2) à quel moment le message d'alerte est-il affiché sur le formulaire?
apparemment ce qui est affiché correspond aux lignes
<div style="color: red;" id=err></div><br />
<div id=detCalcul></div>
pourtant d'apres ce que je comprend de la fonction calcul, c'est objDet.innerHTML qui contient le message d'alerte..

bref je te remercie bcp d'avoir pris du temps pour te pencher sur mon pb, mais peux tu m'expliquer un peu plus stp pour que puisse arriver au résultat attendu?
merci

Citation:

1) quelles sont les roles exacts des variables
detCalcul et err ?
tu fais un document.getElementById sur ces variables mais pourtant ce ne sont pas des objets du formulaire...

Ce sont des zones pour afficher le message d'erreur et le détail du calcul.
Tu ne veux pas d'alert() donc je pense que c'est la solution...
Tu peux faire un getElementById sur n'importe quoi... pas besoin que ça soit un élément de ton formulaire.

Citation:

mais peux tu m'expliquer un peu plus stp

Cf. commentaires :
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 // variables PHP var x=0; // echo "var x=".$x; var y=0; // $y var z=0; // $z // exp reg qui correspond à un nombre entier var is_num = new RegExp("^[0-9]+$"); // fonction de vérification de la saisie function verifChp( chp ) { // si la saisie n'est pas un nombre... if( !is_num.test( chp.value ) ) { // on vide le champ et on retourne 0 chp.value = ""; return 0; } // sinon on retourne le nombre (entier) else return parseInt(Number(chp.value)); } // Le calcul... function calcul() { var objErr = document.getElementById('err'); // zone pour afficher le message d'erreur var objDet = document.getElementById('detCalcul'); // zone pour afficher le détail de l'opération (pour tester) var objF = document.f; // le formulaire // on vérifie la saisie et on récupère la valeur retournée var a = verifChp(objF.a); var b = verifChp(objF.b); var c = verifChp(objF.c); // On calcule et on affiche l'erreur si résultat > 15 if( eval( (x+a)+3*(y+b)+5*(z+c)>15 ) ) objErr.innerHTML = "erreur..."; // sinon on affiche rien (ou on efface) else objErr.innerHTML = ""; // On affiche le détail du calcul objDet.innerHTML = "(x+a)+3x(y+b)+5x(z+c)<br />"; objDet.innerHTML += "= ("+x+"+"+a+")+3x("+y+"+"+b+")+5x("+z+"+"+c+")<br />"; objDet.innerHTML += "= "+eval((x+a)+3*(y+b)+5*(z+c)); }
J'ai modifié un truc dans la fonction verifChp... yavait un bug

Citation:

je l'ai essayé comme ça et il ne se passe rien...

J'ai testé sous IE7 et FF2.
Le code est peut être pas super, les experts d'ici doivent pouvoir faire bcp mieux.. MAIS ça devrait tourner

salut,
j'ai testé le code (sur IE6 et FF1) mais je n'ai toujours aucun message qui apparait..:(
je me demande si cele n'est pas du au fait que mes variables a,b,c viennent de listes déroulantes?
voilà mon code (enfin la partie concernée). Si jamais tu vois ou ça cloche...merci bcp (nb : j'ai mis les variables x,y,z en dur égales à 1 pour le test)

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
 
<script>
 
 // variables PHP  
var x=1;   	// echo "var x=".$x;
var y=1;	// $y	
var z=1;	// $z
 
// exp reg qui correspond à un nombre entier
var is_num = new RegExp("^[0-9]+$");
 
 
// fonction de vérification de la saisie
function verifChp( chp ) {
 	// si la saisie n'est pas un nombre...
 	if( !is_num.test( chp.value ) ) {
		// on vide le champ et on retourne 0
		chp.value = "";
		return 0;
	}	
	// sinon on retourne le nombre (entier)
	else  return parseInt(Number(chp.value));
 
}
 
// Le calcul...
function calcul() {
 
	var objErr = document.getElementById('err');		// zone pour afficher le message d'erreur
	var objDet = document.getElementById('detCalcul');	// zone pour afficher le détail de l'opération (pour tester)
	var objF = document.rejoindre;
	// on vérifie la saisie et on récupère la valeur retournée
 
	var a = verifChp(objF.vnb_pers1);
	var b = verifChp(objF.vnb_pers2);
	var c = verifChp(objF.vnb_pers3);
 
 
 	// On calcule et on affiche l'erreur si résultat > 15
	if( eval( (x+a)+3*(y+b)+5*(z+c)>15 ) ) objErr.innerHTML = "erreur...";
	// sinon on affiche rien (ou on efface) 
	else objErr.innerHTML = "";
 
	// On affiche le détail du calcul
	objDet.innerHTML = "(x+a)+3x(y+b)+5x(z+c)<br />";
	objDet.innerHTML += "= ("+x+"+"+a+")+3x("+y+"+"+b+")+5x("+z+"+"+c+")<br />";
	objDet.innerHTML += "= "+eval((x+a)+3*(y+b)+5*(z+c));
}
 
 </script>
 
</head>
<body>
 
<form name="rejoindre" action="index.php?mod=xx&ac=confirm_rejoindre" method="post" onsubmit="return verification3();">
<? echo " <fieldset>
			<p><label>Nombre d'enfants
  			<select name='vnb_pers1' id='pers1' onkeyup='calcul();'> 
			<option value='0' selected>0</option> 
			<option value='1'>1</option> 
			<option value='2'>2</option> 
			<option value='3'>3</option>
                                      </select></label> </p>
 
			<p><label>Nombre d'adolescents
  			<select name='vnb_pers2' id='pers2' onkeyup='calcul();'> 
			<option value='0' selected>0</option> 
			<option value='1'>1</option> 
			<option value='2'>2</option> 
			<option value='3'>3</option>
                                      </select></label> </p>  
 
 
			<p><label>Nombre d'adultes
  			<select name='vnb_pers3' id='pers3' onkeyup='calcul();'> 
			<option value='0' selected>0</option> 
			<option value='1'>1</option> 
			<option value='2'>2</option> 
			<option value='3'>3</option>
                                      </select></label> </p>  
 
</fieldset>
 
<center><input type=submit value='Valider'></center>
</form>			
 
<div style='color: red;' id=err></div><br />
<div id=detCalcul></div>
 
";
 
?>
 
</body>
</html>

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
 
<script>
 
 // variables PHP  
var x=1;   	// echo "var x=".$x;
var y=1;	// $y	
var z=1;	// $z
 
 
// Le calcul...
function calcul() {
 
	var objErr = document.getElementById('err');		
	var objDet = document.getElementById('detCalcul');	
	var objF = document.rejoindre;
 
	var a = parseInt(objF.vnb_pers1.options[objF.vnb_pers1.selectedIndex].value);
	var b = parseInt(objF.vnb_pers2.options[objF.vnb_pers2.selectedIndex].value);
	var c = parseInt(objF.vnb_pers3.options[objF.vnb_pers3.selectedIndex].value);
 
	if( eval( (x+a)+3*(y+b)+5*(z+c)>15 ) ) objErr.innerHTML = "erreur...";
	else objErr.innerHTML = "";
 
	objDet.innerHTML = "(x+a)+3x(y+b)+5x(z+c)<br />";
	objDet.innerHTML += "= ("+x+"+"+a+")+3x("+y+"+"+b+")+5x("+z+"+"+c+")<br />";
	objDet.innerHTML += "= "+eval((x+a)+3*(y+b)+5*(z+c));
}
 
 </script>
 
</head>
<body>
 
<form name="rejoindre" action="index.php?mod=xx&ac=confirm_rejoindre" method="post" onsubmit="return verification3();">
<fieldset>
			<p><label>Nombre d'enfants
  			<select name='vnb_pers1' id='pers1' onchange='calcul();'> 
			<option value='0' selected>0</option> 
			<option value='1'>1</option> 
			<option value='2'>2</option> 
			<option value='3'>3</option>
                                      </select></label> </p>
 
			<p><label>Nombre d'adolescents
  			<select name='vnb_pers2' id='pers2' onchange='calcul();'> 
			<option value='0' selected>0</option> 
			<option value='1'>1</option> 
			<option value='2'>2</option> 
			<option value='3'>3</option>
                                      </select></label> </p>  
 
 
			<p><label>Nombre d'adultes
  			<select name='vnb_pers3' id='pers3' onchange='calcul();'> 
			<option value='0' selected>0</option> 
			<option value='1'>1</option> 
			<option value='2'>2</option> 
			<option value='3'>3</option>
 </select></label> </p>  
 
</fieldset>
 
<center><input type=submit value='Valider'></center>
</form>			
 
<div style='color: red;' id=err></div><br />
<div id=detCalcul></div>
 
 
</body>
</html>

08/02/2007, 23h02
arnogef
super ça marche! :D
bravo...y a de la maitrise!
un dernier truc : j'arrive pas à récupérer mes variables php

j'ai fait :
Code:

1 2 3 4 5 6 7 8 9 10 <html> <head> <script> // variables PHP echo "var x=".$ligne_requete->NB_pers1; echo "var y=".$ligne_requete->NB_pers2; echo "var z=".$ligne_requete->NB_pers3;
mais le code marche plus (alors qu'avec les variables en dur ca marche)
y a un probleme de syntaxe??

merci beaucoup pour ton aide
08/02/2007, 23h49
mikemarti

Tu ouvres bien ta balise php avant de faire tes echo ?
Quand tu ouvre ta page et que tu affiches le code source de la page ça donne quoi ?
09/02/2007, 00h02
arnogef
bon finalement j'ai trouvé une syntaxe qui a l'air d'etre ok :
Code:

1 2 3 4 // variables PHP var x="<?php echo $ligne_requete->NB_pers1;?>"; var y="<?php echo $ligne_requete->NB_pers2;?>"; var z="<?php echo $ligne_requete->NB_pers3;?>";
probleme le calcul qui est fait donne n'importe quoi comme résultat :

exemple avec x=3 , y=1, z=0, a=1 :
il me sort :

(x+a)+3x(y+b)+5x(z+c)
= (+1)+3x(+0)+5x(+0)
= 100

PS : je viens de voir le code source de la page :
Code:

1 2 3 4 // variables PHP var x=""; var y=""; var z="";
pas terrible !!
précision : la requete qui génère les variables $ligne_requete est définie après dans le code..est ce que c'est pour ça?
10/02/2007, 11h32
arnogef

bonjour
personne n'a d'idées sur ce probleme de variable php dans le javascript?
11/02/2007, 19h20
arnogef

help !?!!:roll:
12/02/2007, 00h53
arnogef

ok c''est bon j'ai résolu mon probleme en déplacant le code javascript apres la requete sql
merci a tous et spécialement a toi mikemarti :king: