jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Actualités > Échanger des champs de formulaire avec JQuery

Échanger des champs de formulaire avec JQuery

samedi 3 février 2007, par sholby

Pour une application de recherche d’itinéraire, il peut être intéressant d’échanger à la volée les éléments renseignés pour le départ et ceux de l’arrivée sans passer par un javascript monstrueux.


NB : Même si le principe énoncé dans cet article reste valable, on trouvera dans le premier article de forum associé une solution plus complète et plus élégante au problème énoncé !

Dans le cas traité dans cet exemple, les divers champs du formulaire qui concernent le départ et l’arrivée ont tous des identifiants identiques, mais précédés, respectivement par "d_" et "a_".

Ainsi, l’input de la ville de départ à un identifiant "d_ville", celui de la ville d’arrivée "a_ville".

Quelque chose comme ça :

<span><label for="d_ville">Ville</label> <input name="d_ville" id="d_ville" type="text" size="20" maxlength="50" value="" /></span> <span><label for="d_cp">CP ou Arrdt</label> <input name="d_cp" id="d_cp" type="text" size="8" maxlength="5" /></span> (etc.)

L’essentiel des champs concernés sont des select et des input. Il y a juste deux zones de boutons radios, qui doivent être traitées séparément. Si mon formulaire contenait des cases à cocher, elles devraient être traitées de façon similaire aux boutons radios.

Voici le code brut :

$(function() {

	// Action lors du clic sur le bouton d'échange
	$("#echange").click( function() {
		var arrivee;

		// échange de l'attribut value de tous les champs du formulaire
		$("#form1 [@name^='d_']").each(function() {
		
			// sauvegarde de l'attribut value de l'arrivee
			arrivee = $("#form1 [@name='"+ this.name.replace(/^d_/, 'a_') +"']").attr('value');
			
			// affectation de l'attribut value du champ arrivee
			$("#form1 [@name='"+ this.name.replace(/^d_/, 'a_') +"']").attr('value',this.value||'');
			
			// affectation de l'attribut value du champ départ
			this.value=arrivee||''; // Pour éviter les undefined...
		});
		
		// Traitement différent pour les boutons radios...
		var dst, ast;
		
		// Sauvegarde de l'id du bouton radio sélectionné dans le fieldset départ
		$("#form1 [@name^='d_'][@type=radio][@checked]").each(function() { dst=this.id; });
		// Sauvegarde de l'id du bouton radio sélectionné dans le fieldset arrivée
		$("#form1 [@name^='a_'][@type=radio][@checked]").each(function() { ast=this.id; });
		
		// échange des deux id
		$("#form1 [@name^='d_'][@type=radio][@id='"+ast.replace(/^a_/, 'd_')+"']").attr('checked','true');
		$("#form1 [@name^='a_'][@type=radio][@id='"+dst.replace(/^d_/, 'a_')+"']").attr('checked','true');
		
	});

});

Explications

La première ligne ne devrait pas poser de problème :

	$("#echange").click( function() {
		var arrivee;

On exécute simplement une fonction anonyme lorsqu’un bouton est cliqué.

		// échange de l'attribut value de tous les champs du formulaire
		$("#form1 [@name^='d_']").each(function() {

Ceci initie une boucle qui cherche tous les éléments à l’intérieur du formulaire d’id "form1" dont l’attribut "name" commence (^=) par la lettre d suivie du caractère souligné (_). Autrement dit, on passe en revue tous les éléments du formulaire présents dans le fieldset "départ".
Pour chacun de ces éléments on va appliquer 3 lignes de code :

			// sauvegarde de l'attribut value de l'arrivee
			arrivee = $("#form1 [@name='"+ this.name.replace(/^d_/, 'a_') +"']").attr('value');

D’abord, on utilise une variable locale (définie en dehors de la boucle), qui va enregistrer la valeur correspondante (.attr(’value’)) du champ arrivée. Ceci utilise un grep pour échanger à la volée les lettres "d_" au début (^d_) du nom (this.name) du champ courant par les lettres "a_". Et au passage, merci à Fil qui m’a indiqué cette solution !

Le reste est facile, puisque calqué sur le même modèle :

			// affectation de l'attribut value du champ arrivee
			$("#form1 [@name='"+ this.name.replace(/^d_/, 'a_') +"']").attr('value',this.value||'');

On affecte la valeur du champ correspondant du fieldset arrivée par la valeur du champ courant. À noter qu’on utilise this.value||’’ comme valeur d’affectation. En pratique ceci se traduit par la valeur du champ courant si elle existe. Sinon une chaîne vide. Sans ce test, tous les champs vides se transforment en ’undefined’ lorsqu’ils sont copiés dans le champ correspondant.

			// affectation de l'attribut value du champ départ
			this.value=arrivee||''; // Pour éviter les undefined...

Puis on récupère la valeur sauvegardée auparavant, et on l’affecte à la valeur du champ courant. On retrouve le même test pour éviter les champs avec des valeurs ’undefined’.

Tout ceci est bien beau, mais les boutons radio n’ont pas de valeur, et le système ne fonctionne donc pas pour eux. Le code suivant est nettement moins élégant, et ne fonctionne que parce que mon formulaire ne contient qu’une série de boutons radios. À ma connaissance (parcellaire), il n’existe pas d’autre façon de déterminer quels boutons sont cochés que de les passer tous en revue ; c’est donc la méthode qui est utilisée ici.

		$("#form1 [@name^='d_'][@type=radio][@checked]").each(function() { dst=this.id; });

Cette ligne passe en revue tous les boutons radios dont le nom commence par ’d_’, et qui sont cochés. Dans les faits, il n’en existera qu’un, et l’affectation de son id à la variable locale dst (nb : rien à voir avec la police, le st veut dire "station" ! :-) ne sera heureusement faite qu’une fois.
On répète à l’identique pour l’arrivée ;

		$("#form1 [@name^='a_'][@type=radio][@id='"+dst.replace(/^d_/, 'a_')+"']").attr('checked','true');

En écho à l’instruction précédente, on va donc chercher le bouton de type radio dont le nom commence par ’a_’, et dont l’id est identique à celle sauvegardée dans la variable dst, à condition d’y échanger le ’d_’ par un ’a_’, et on lui affecte la valeur ’checked’, ce qui suffit à décocher, pour ainsi dire, le bouton radio précédemment sélectionné dans le fieldset arrivée.
Là encore, on répète l’instruction à l’identique pour le départ.

Répondre à cet article

6 Messages de forum


Derniers commentaires

Nouveautés sur le Web