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

**arnogef** · 07/02/2007, 17h47

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

**Sancho_54** · 07/02/2007, 18h18

Tu peux le faire tous simplement avec la fonction alert("Ton message"); voila

**arnogef** · 07/02/2007, 18h22

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?

**E.Bzz** · 07/02/2007, 18h23

Bonjour,

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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+

**arnogef** · 07/02/2007, 19h03

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

**mikemarti** · 07/02/2007, 21h04

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
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>

**arnogef** · 08/02/2007, 00h44

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

**mikemarti** · 08/02/2007, 17h42

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.

mais peux tu m'expliquer un peu plus stp

Cf. commentaires :

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
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

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

**arnogef** · 08/02/2007, 20h26

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 :

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
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>

**mikemarti** · 08/02/2007, 22h22

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
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>

**arnogef** · 08/02/2007, 23h02

super �a marche!

bravo...y a de la maitrise!
un dernier truc : j'arrive pas � r�cup�rer mes variables php

j'ai fait :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**mikemarti** · 08/02/2007, 23h49

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 ?

**arnogef** · 09/02/2007, 00h02

bon finalement j'ai trouv� une syntaxe qui a l'air d'etre ok :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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?

**arnogef** · 10/02/2007, 11h32

bonjour
personne n'a d'id�es sur ce probleme de variable php dans le javascript?

**arnogef** · 11/02/2007, 19h20

help !?!!

**arnogef** · 12/02/2007, 00h53

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

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

JavaScript

Partager

Partager