Discussion :

[Emcy]

bonjour,

J'ai un formulaire avec plein de textbox, menu déroulant et des checkbox.

Dans mon formulaire AJAX, j'ai une image qui me permet de connaitre l'état du formulaire (en cours d'envoi, erreur d'envoi, envoi OK, pas d'action en cours) => je change via un script l'image en fonction de l'etat.

Lorsque les données ont été envoyées, j'affiche l'image "envoi OK" pour dire que tout c'est bien passé.
=> ce que je voudrais faire, c'est effacer cette image dès qu'un des champs de l'image à été modifier pour dire à l'utilisateur qu'il faut qu'il renvoie le formulaire : comment faire cela simplement (comment détecter que l'un des champs a été modifié) ?

[E.Bzz]

Bonjour,

comment faire cela simplement (comment détecter que l'un des champs a été modifié) ?

sur onchange de tes champs, tu changes l'image : si le onchange s'est déclenché, c'est que le champ a été modifié (par définition) ...

A+

[Emcy]

il n'y a pas plus simple ? car mettre onchange sur tous mes inputs, c'est super lourd (j'ai 200 inputs)...

[E.Bzz]

il n'y a pas plus simple ? car mettre onchange sur tous mes inputs, c'est super lourd (j'ai 200 inputs)...

Si tu trouves plus simples de parcourir tous tes input pour comparer leur valeur initiale avec leur valeur actuelle, tu peux aussi faire comme ça

A+

[Emcy]

pas de solutions miracle alors ...

J'ai essayé de faire un script qui défini l'evenement onchange comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function fonction_start(){
	var Form = document.getElementById("monFormulaire");
 
	for (key=0; key < Form.elements.length; key++) {  
		Form.elements[key].onchange = "fonctionChangeImage();"	
	}
 
}
 
function fonctionChangeImage(){
	document.getElementById("monImage").src = "../empty.gif"
}

=> mais ça ne marche po ....

[E.Bzz]

Essaye avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function fonction_start(){
	var Form = document.forms["monFormulaire"]; // Pour utiliser la bonne collection
		
	for (key=0; key < Form.elements.length; key++) {  
		Form.elements[key].onchange = fonctionChangeImage;
	}
 
}

A+

[Emcy]

merci ça marche nickel.
Par contre j'ai plutôt utiliser l'événement onfocus car avec les textbox, il faut sortir de la textbox pour que l'événement onchange agisse (bien que ça ne fasse pas exactement ce que je voulais, ça me parait mieux d'utiliser onfocus)

[E.Bzz]

Par contre j'ai plutôt utiliser l'événement onfocus car avec les textbox, il faut sortir de la textbox pour que l'événement onchange agisse

Si tu cliques dans l'input et que tu ressors sans rien modifier (ou en resaisissant la même chose), tu vas détecter un changement à tord (par exemple quelqu'un qui se déplace avec TAB sera toujours gêné par ton contrôle).

Pourquoi le délai de prise en compte du onchange te gêne-t-il ?
Pour valider le formulaire, tu es obligé de sortir de l'input, donc de déclencher le onchange => aucun problème.

Pour que ton onfocus fonctionne correctement, il faut systématiquement ajouter le test

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (this.value != this.defaultValue)

Un peu lourd, quand un évènement est prévu pour faire la même chose

A+

[Emcy]

Pourquoi le délai de prise en compte du onchange te gêne-t-il ?
Pour valider le formulaire, tu es obligé de sortir de l'input, donc de déclencher le onchange => aucun problème.

Si l'utilisateur envoi le formulaire une premiere fois, il y a une image "données enregistrées" qui s'affiche. Après si l'utilisateur change la valeur d'une seule des textbox (sans ressortir de celle-ci), l'image sera toujours là alors que la valeur aura changée => donc l'utilisateur devra cliquer sur enregistrer alors qu'il y aura l'image "données enregistrées" d'active (pour moi, cette image sert d'indicateur pour savoir si les données du formulaire ont été enregistrées).


=> Je préfère utiliser onfocus car si on change la valeur de la textbox, on verra forcement l'image disparaitre : le seul bémol est que si l'utilisateur sélectionne la textbox mais ne change pas la valeur, l'image disparaitera aussi (je préfaire ça) : mieux vaut enregistrer alors qu'il n'y en a pas besoin que plutôt oublier d'enregistrer alors qu'il y en a besoin.

Donc voila pourquoi je préfère rester sur cette solution

[E.Bzz]

C'est un choix qui se défend

Une autre solution est de ne laisser l'image "données enregistrées" qu'un court instant (10 secondes avec un setTimeout() ). On peut raisonnablement supposer que l'utilisateur est toujours devant l'écran pour la voir ...
C'est le principe que j'ai retenu pour une appli récente (pour les mêmes raisons de cohérence de l'affichage que toi).

A+