JQuery pour masquer ou afficher des champs de formulaires

JQueryJQuery est un framework Javascript qui a révolutionné la manière dont ont peut générer des événements côté client. L’interaction entre Javascript et HTML est devenue beaucoup plus aisée et standardisée grâce à JQuery.

Dans cet article, je montre comment gérer l’affichage de champs de formulaire grâce à JQuery.

La clef de JQuery réside dans la balise <head> de votre document. JQuery.js est un fichier javascript qui contient les fonctions principales. J’en ai téléchargé la version allégée (72 Ko) à partir de JQuery.com

<script type= »text/javascript » src= »./js/jquery-1.4.2.min.js »></script>

La liste déroulante (select) fait afficher des champs de formulaire

Mon premier exercice est de laisser JQuery afficher des champs de formulaire si une valeur particulière d’un champ liste déroulante est sélectionnée.

Voici mon formulaire HTML avec 3 éléments : 2 listes déroulantes (id = type et id = choix) et un textarea (id = text) :

<form>
<select id= »type »><option>choix de type</option><option value= »1″>type 1</option><option value= »2″>type 2</option><option value= »3″>type 3</option></select><br />
<select id= »choix »><option>choix</option><option value= »1″>choix 1</option><option value= »2″>choix 2</option><option value= »3″>choix 3</option></select><br />
<textarea id= »text »></textarea>
</form>

L’affichage de cette page dans un navigateur affichera les 3 éléments (2 listes déroulantes et le champs textarea).

Mon objectif est d’afficher seulement la première liste déroulante (id = type) et de seulement afficher la seconde liste déroulante et le textarea si la troisième entrée de la première liste déroulante est sélectionnée.

Dans la <head> de mon document, j’ajoute un script qui commence avec la fonction $(document).ready(). Ceci vous permet de charger autant de fonctions que nécessaire dès que le DOM est chargé et avant que le contenu de votre page ait été chargé. Vous pourriez- enregistrer cette fonction à l’intérieur d’un fichier .js séparé et le pouvoir de JQuery est que vous n’aurez rien d’autre à ajouter au contenu HTML de votre document :

<script language= »javascript »>//<![CDATA[

$(document).ready(function() {

$("#choix").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

else{

$("#choix").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

$("#choix").change(function() {

var val = $("#choix").val();

$("#text").append(val + "\n");

});

});

//]]></script>

Vous devriez aisément compendre ce que ce script fait : la liste déroulante « choix » et le champ textarea sont masqués par défaut. JQuery a accès aux éléments de formulaire grâce à leur id (#choix, par exemple). Si la valeur de la liste déroulante « type » est 3, les autres éléments du formulaire seront affichés, sinon, ils seront masqués. Puis si lma valeur de la liste déroulante « choix » change, sa valeur sera ajoutée au contenu du champ textarea.

La case à cocher (checkbox) fait afficher des champs de formulaire

 

Mon second exercice est de laisser JQuery identifier si une case à cocher (checkbox) est cochée pour faire afficher ou masquer des champs de formulaire.

J’ajoute un champ checkbox à mon formulaire HTML :

 

<form>
<input type= »checkbox » id= »check » />
<select id= »type »><option>choose a type</option><option value= »1″>type 1</option><option value= »2″>type 2</option><option value= »3″>type 3</option></select><br />
<select id= »choice »><option>choice</option><option value= »1″>choice 1</option><option value= »2″>choice 2</option><option value= »3″>choice 3</option></select><br />
<textarea id= »text »></textarea>
</form>

Puis je modifie le script de ma balise <head> pour identifier si la case a été cochée ou non :

<script language= »javascript »>//<![CDATA[

$(document).ready(function() {

$("#choix").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

else{

$("#choix").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

$("#check").change(function() {

if($("#check").attr("checked")) {

$("#choix").show();

$("#text").show();

}

else{

$("#choix").hide();

$("#text").hide();

}

});

$("#choix").change(function() {

var val = $("#choix").val();

$("#text").append(val + "\n");

});

});

//]]></script>

Avec JQuery, vous pourrez aussi ajouter quelques effets à la « scriptaculous » avec ces actions show et hide :

$(« #choix »).show(« slow »);

affichera l’élément de formulaire lentement.

Vous pourriez aussi utiliser une valeur numérique :

$(« #choix »).hide(200);

Webliography :

JQuery.com

JQuery event tracker pour Google Analytics

Google Analytics est l’outil statistique par excellence pour comptabiliser les hits sur votre site. Il vous donne des statistiques à propos de vos visiteurs, à propos des sources de trafic vers votre site et à propos des pages vues.

Ces outils sont assez utiles si vous désirez des informations sur qui vient visiter votre site et quelles pages sont les plus visitées.

Un autre outil est le suivi des événements (event tracker) qui est accessible par le menu Contenu / Suivi des événements.

Code de suivi asynchrone

Pour finaliser votre compte Google Analytics, vous devez copier-coller un bout de code de suivi donné par GA (à coller juste avant la balise </body> de vos pages).

Google Analytics suggère que vous ne copiez pas ce code de suivi à placer à la fin de vos pages, mais de le remplacer par un code de suivi asynchrone à coller dans la <head> de votre document :

<script type= »text/javascript »>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Il vous faudra bien entendu remplacer le account ID (UA-XXXXX-X) par le vôtre.

Ce bout de code fonctionnera aussi bien que l’ancien code de suivi et n’attendra pas que la fin de la page soit chargée pour s’exécuter puisqu’il se trouve dans la <head> de votre document.

Pour suivre les événements sur votre page, disons des clics sur des liens, j’ai ajouté une fonction à ce script :

 

<script type= »text/javascript »>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

 

function trackClick(text,link,title) {
_gaq.push(['_trackEvent',text,link,title]);
};
</script>

Cette fonction trackClick enverra des informations à l’outil de suivi des événements de Google Analytics. Les attributs passés à cette fontion sont :

  • une categorie : le texte du lien
  • une action : l’adresse du lien
  • un libellé : l’attribut titre du lien

Donc, si ma page contient un lien comme celui-ci :

<a href= »./produits.php » title= »Choisissez un de nos produits »>Nos produits</a>

le script enverra les informations suivantes à GA si le lien est cliqué :

  • une categorie : Nos produits
  • une action : ./produits.php
  • un libellé : Choisissez un de nos produits

Pour que ces données soient envoyées à GA, j’utiliserai JQuery. Donc je devrai tout d’abord télécharger jquery.js, l’uploader sur mon serveur Web et ajouter la ligne suivante à la <head> de mon document :

<script type= »text/javascript » src= »jquery.js »></script>

Puis j’ajouterai un autre script qui lancera ma fonction trackClick quand un lien est cliqué :
<script type= »text/javascript »>
$(document).ready(function(){
$(‘a’).click(function(){
var eventCategory = $(this).attr(‘title’);
var trackURL = $(this).attr(‘href’);
var text = $(this).text();
trackClick(text,trackURL,eventCategory);
});
});
</script>

Vous devrez attendre un moment avant que Google Analytics n’affiche des événements, mais une fois fait, vous pourriez voir les résultats suivants :

Event tracking Google Analytics

Vous pouvez parcourir vos données par catégorie, par action et par libellé.

Webliography

Google’s Event Tracking Guide

Asynchronous Tracking