Discussion :

[hugo69]

Bonjour,

J'utilise une fonction qui me permet de colorer mes champs sur onfocus.
J'utilise egalement une fonction sur onlbur pour enlever la couleur quand on quite le champs.

Ces fonctions sont initialis�es sur le chargement de la page.


Dans le formulaire sur un champs je fais une verification sur un onblur. en appelant une fonction "non precharg�e".

La premiere fonction de coloration et de non coloration fonctionne mais la fonction appeler sur un champs apres un onlbur ne fonctionne pas. Elle fonctionne si j'enleve la fonction de coloration.

Precisions sans grande importance. Ma seconde fonction appel�e "manuellement" est une fonction ajax qui va verifier que l'email saisie n'existe pas dans la base de donn�e.

Voici le code de coloration, une petite partie.

on colorise

Code :

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

hovers[i4].onfocus = function() {this.className += "Hovered";}

On d�-colorise. si j'enleve ca tout fonctionne nickel

Code :

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

hovers[i4].onblur = function() {this.className = this.className.replace(/Hovered/g, "");}

Voici mon code html sur mon champs pour lancer la seconde fonction:

Code :

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

<input type='text' id='email' name='email' size='40' maxlength='256' value='' class="textinput" onblur='checkemail()'/>

Ma question:
On ne peux pas utiliser deux fois onblur sur un meme champs????


j'avais pens� mettre le lancement de ma fonction dans le onblur de la fonction de coloration, avec un if qui va detecter l'id du champs, mais comme jai dautres formulaire qui ont des champs id='email' dont je ne peux pas changer le nom, je ne peux pas mettre de condition pour l'appliquer ici, et puis de toute facon cest pas tres propre, si je le met � la suite du code de coloration ca marche

[E.Bzz]

Bonjour,

Ma question:
On ne peux pas utiliser deux fois onblur sur un meme champs????

Quand tu quittes le champ, l'�v�nement ne se d�clenche qu'une seule fois. Il ne peut donc appeler qu'une seul fois un script. Ce que tu peux faire, c'est appeler une fonction, qui, elle, en appelle 2 � la suite (ici : d�coloration + checkmail() ).
Ou utiliser 2 �v�nement distinct, mais il y aura des cas non g�r�s. Ex : une fonction sur onBlur et l'autre sur onChange => si pas de modif du champ (sauf select), le onCha,nge ne sera pas d�clench�.
La 1� solution est la plus simple � mettre en place ...

A+

[hugo69]

Mon probleme est plus complexe.

La fonction de coloration est precharg�e.
A l'ouverture, il liste tous les champs et il enregistre ce quil doit faire sur onblur et onfocus.

La fonction de controle sur la base est declench�e sur une action non prechargee.

Ce que j'ai test�.
J'ai nomm�e l'id de mon champs email: emailcheck.
Dans la fonction de coloration prechargee, je lui ai dis:

Si il existe un champs EmailCheck (avec getelementbyId)

Si sa valeur est non vide

Alors fait la verification ajax dans la base pour voir si lemail existe deja.


J'ai deux probleme:
La verification fonctionne bien, mais j'ai comme l'impression quil m'effectu 2 fois la fonction je ne sais pour quelle raison. Il m'affiche 2 fois mon AlertBox (voici ci dessous la fonction ajax)

Comme le temps de reaction de la fonction ajax, n'est pas immediat, j'ai un petit bug sur la fonction de coloration. Mon champs a en css une image de fonds (cest plus jolie), sur le onblur, ca prends la partie base de ma photo de fond qui est en fait la meme photo color�e en jaune. il y arrive en jouant avec css et la class du controle.
Je ne sais pas ce quil se passe, mais si je met le code expliqu� ci dessus, ca deconne et ca eprd la photo de fond...

JE sais que ce nai pas facile a voir mon probleme et que ca peut tetre assez flou.
Je met quand meme un peu de code.

Ma fonction ajax:

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 checkemail(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						if(leselect>0){
							alert("Cet email est déja inscrit dans notre base, veuillez en saisir un autre ou redemander votre mot de passe !!!");
							document.formulaire.email.value='';
							document.formulaire.email.focus();
						}
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","outils/checkmail.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('email');
				email = sel.value;
				xhr.send("email="+email);
			}

Ma fonction de coloration precharg�e sur la page:

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
 
var hovers = new Array();
 
 
 
 
function init() {
 
	hoverEffects();
 
}
 
function hoverEffects() {
	//get all elements (text inputs, passwords inputs, textareas)
	var elements = document.getElementsByTagName('input');
	var j = 0;
	for (var i4 = 0; i4 < elements.length; i4++) {
		if((elements[i4].type=='text')||(elements[i4].type=='password')) {
			hovers[j] = elements[i4];
			++j;
		}
	}
	elements = document.getElementsByTagName('textarea');
	for (var i4 = 0; i4 < elements.length; i4++) {
		hovers[j] = elements[i4];
		++j;
	}
 
	//add focus effects
	for (var i4 = 0; i4 < hovers.length; i4++) {
		hovers[i4].onfocus = function() {this.className += "Hovered";}
		hovers[i4].onblur = function() {this.className = this.className.replace(/Hovered/g, "");}
	}
}
 
window.onload = init;

Le input sans le onlbur="checkemail()":

Code :

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

<input type='text' id='email' name='email' size='40' maxlength='256' value='' class="textinput"/>

Le css me permettant de switcher pour la photo:

Code :

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

1
2
3
4
5
6
7
8
9
10
.textinput, .textinputHovered {
	width:236px;
	height:15px;
	background:url(../../assets/pict/form/input.gif) no-repeat left top;
	border:none;
	padding:4px 8px;
}
.textinputHovered {
	background-position:left bottom;
}

et le petit fichier photo




Je me doute que tu va pas tester tout, mais bon peut etre que tu verra quelque chose qui cloche, sinon ce code servira peut etre a quelqun.


Voici ce que javais tent� hier soir et qui me faisait les problemes ci dessus:

Code :

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

1
2
3
4
5
6
7
8
9
hovers[i4].onblur = function() {
this.className = this.className.replace(/Hovered/g, "");
if(document.getElementById('email')){
  if(document.getElementById('email')!=''){
    checkemail();
}
}
}
J'ai essayé en mettant la fonction email avant et apres le remplacement de class, mais ca nameliore pas

[dam_moreyllo]

Bonjour !

On ne peux pas utiliser deux fois onblur sur un meme champs????

Quand tu quittes le champ, l'�v�nement ne se d�clenche qu'une seule fois. Il ne peut donc appeler qu'une seul fois un script.

C'est pas exactement �a. En fait c'est parce que dans ton input tu assigne � onblur une fonction qui va executer la fonction checkmail.
En fait c'est comme si tu avais fait en javascript :

Code :

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

hovers[i4].onblur = function() { checkmail(); }

Et apr�s dans ta fonction qui initialise tout les champs de ton formulaire tu fais encore hovers[i4].onblur = function () {}
Ce qui fait que tu a �cras� ta premi�re fonction avec ta nouvelle. Donc �videment la premi�re n'est plus execut�e (celle avec le checkmail).

Ce que tu peux faire, c'est appeler une fonction, qui, elle, en appelle 2 � la suite (ici : d�coloration + checkmail() ).

En effet c'est ce que je ferai moi aussi.

De plus, je trouve ta fonction de colorisation pas tr�s optimis�e...

Code :

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

1
2
3
function init() {
	hoverEffects();
}

J'esp�re que t'a pas que l'appel � hoverEffects dans ta fonction init, parce que sinon elle sert � rien...
Pour la fonction hoverEffects, je ferai plut�t comme �a :

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
function hoverEffects() {
	//get all elements (text inputs, passwords inputs, textareas)
	var elements = document.getElementsByTagName('input');
	for (var i4 = 0; i4 < elements.length; i4++) {
		if((elements[i4].type=='text')||(elements[i4].type=='password')) {
			elements[i4].onblur = onblureffect;
			elements[i4].onfocus = onfocuseffect;
		}
	}
	elements = document.getElementsByTagName('textarea');
	for (var i4 = 0; i4 < elements.length; i4++) {
		elements[i4].onblur = onblureffect;
		elements[i4].onfocus = onfocuseffect;
	}
}
var onfocuseffect = function () {
   this.className += "Hovered";
}
var onblureffect = function () {
   this.className = this.className.replace(/Hovered/g, "");
   if (this.id == 'email') {
      checkmail();
   }
}

�a te fait une boucle en moins. De plus j'ai ajout� dans la fonction onblureffect l'appel � la fonction checkmail si l'id du champ est email.

Donc normalement �a devrait r�soudre ton probl�me !