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 !