Discussion :

[selinav]

Bonjour,

J'ai un formulaire html où l'internaute renseigne plusieurs champs.
Son nom doit s'afficher en majuscules.
J'ai donc créer un petit script qui me permet de faire cela et qui fonctionne mais j'aimerais l'automatiser pour pouvoir le faire pour plusieurs champs

Voici ce que j'ai fait et qui fonctionne

Code :

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

1
2
3
4
5
6
7
 
nom = $('#edit-submitted-le-licencie-nom');
nom.change(function() {
	//alert(nom.val().toUpperCase());
	majuscules = nom.val().toUpperCase();
	nom.val(majuscules);
});

J'aimerais le faire également pour d'autres champs.
J'ai donc créé un tableau comprenant tous mes champs à modifier.

Code :

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

1
2
3
4
5
 
array = [$('#edit-submitted-le-licencie-nom'),
	    $('#edit-submitted-les-parents-mere-m-nom'),
	    $('#edit-submitted-les-parents-pere-p-nom')
	   ];

Le problème c'est que je ne sais pas trop comment le parcourir en mêlant la fonction .each et .change

J'ai testé quelques petits trucs mais qui ne fonctionnent pas.

Code :

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

1
2
3
4
5
6
7
8
 
$.each(array, function(value){
	value.change(function() {
		alert(value.val().toUpperCase());
		majuscules = value.val().toUpperCase();
		value.val(majuscules);
	});
});

Pouvez-vous me guider, SVP?

Merci

[Bovino]

Commence déjà par regarder la syntaxe de jQuery.each().

Ensuite array.change(function() {...}) ça n'a aucun sens. Il n'existe aucun événement lié à un tableau.

[selinav]

effectivement je viens de le corriger dans mon message

[Bovino]

Ben oui mais c'est toujours pas ça !

Le premier paramètre passé à la fonction de rappel est l'indice de l'élément, pas sa valeur.

[selinav]

merci mais, je ne comprends pas trop car mon tableau se présente donc sous la forme

Code :

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

1
2
3
4
 
array[0]=$('#edit-submitted-le-licencie-nom');
array[1]=$('#edit-submitted-les-parents-mere-m-nom');
array[2]=$('#edit-submitted-les-parents-pere-p-nom');

si je fais ceci; ça ne marche pas non plus, il y a quelque chose qui m'échappe

Code :

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

1
2
3
4
5
6
7
8
 
$.each(array, function(key, value){
	key.change(function(value) {
		alert(value.val().toUpperCase());
		majuscules = value.val().toUpperCase();
		value.val(majuscules);
	});
});

[Bovino]

il y a quelque chose qui m'échappe

Oui, je vois ça !

Quand tu fais

Code :

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

$.each(array, function(key, value){...})

key correspond aux index du tableau (0, 1, ...) et value à la valeur correspondante (array[0], array[1], ...)
Tu utilises donc les paramètres dans le mauvais ordre.

[selinav]

merci mais dans l'api jquery, il y a un exemple et ils mettent la clé en premier et la valeur en 2eme

Code :

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

1
2
3
4
 
$.each( { name: "John", lang: "JS" }, function(k, v){
   alert( "Key: " + k + ", Value: " + v );
 });

Est ce que je me trompe au niveau du .each ou du .change ?

[SpaceFrog]

key = indexe ...
value = contenu ...

tu tentes d'applique un change non pas sur un element du DOM mais sur un index d'array .....

[Bovino]

ils mettent la clé en premier et la valeur en 2eme

key correspond aux index du tableau et value à la valeur correspondante

Ben c'est ce que je t'ai dis !

[selinav]

Oui, j'ai donc remplacé le key par value mais il ne se passe rien.

Code :

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

1
2
3
4
5
6
7
8
 
$.each(array, function(key, value){
	value.change(function(value) {
		alert(value.val().toUpperCase());
		majuscules = value.val().toUpperCase();
		value.val(majuscules);
		});
	});

Si je mets un alert ('passe'); avant le alert(value.val().toUpperCase()); ça me l'affiche donc je passe bien dedans.

J'ai essayé de passer ou non le paramètre 'value' dans la fonction du .change. Et d'utiliser this quand je n'en mets pas mais ça ne change rien

[Bovino]

Dans le callback de .change(), value correspond à l'élément DOM, pas à un objet jQuery, il faut donc appeler $(value) pour appliquer les méthodes jQuery.

D'autre part, appeler deux paramètres avec le même nom est une très mauvaise idée !

[selinav]

Milles merci, j'ai enfin réussi.
Je n'ai pas passé d'argument à la fonction de callback change, il n'y en avait pas besoin.

Voici le code définitif

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
array = [$('#edit-submitted-le-licencie-nom'),
		         $('#edit-submitted-les-parents-mere-m-nom'),
		         $('#edit-submitted-les-parents-pere-p-nom')
		         ];
 
$.each(array, function(key, value){
	value.change(function() {
		//alert(value.val().toUpperCase());
		majuscules = value.val().toUpperCase();
		value.val(majuscules);
	});
});