• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Formulaires et tableaux

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons nous intéresser aux formulaires et aux tableaux dans jQuery. Je ne parle pas des tableaux HTML <table></table>, mais des tableaux JavaScript, définis par exemple en sérialisant des données ou encore retournés par la méthode queue().

Vous verrez dans un premier temps comment gérer le focus ou la perte de focus d'un élément de tableau ou encore comment vider un formulaire. Dans un second temps, vous verrez différentes méthodes associées au traitement des données contenues dans des tableaux.

Les formulaires

Donner le focus à un élément

Si vous êtes amenés à créer une page de login, vos utilisateurs apprécieront que la première zone de texte (celle où ils saisiront leur nom) soit sélectionnée par défaut. Ceci est extrêmement simple en jQuery. Supposons que vous ayez défini la zone de texte #user comme ceci :

<input type="text" id="user">

Pour que le point d'insertion s'affiche dans cette zone de texte et que les frappes au clavier y soient reportées, utilisez cette instruction jQuery :

$('#user').focus();

Quel élément a le focus ?

Il peut parfois être intéressant de savoir quel élément a le focus dans un formulaire. Par exemple pour modifier sa mise en forme afin que l'utilisateur sache d'un simple coup d'œil quel élément il est en train de modifier.

Dans cet exemple, un formulaire contient trois zones de texte <input type="text"> et un <textarea>. Lorsque l'utilisateur clique dans un de ces éléments, son identifiant est affiché dans une balise <span>.

<span id="status">Cliquez sur un des éléments du formulaire</span><br /><br />
<form>
  <input type="text" id="zone1"><br />
  <input type="text" id="zone2"><br />
  <input type="text" id="zone3"><br />
  <textarea id="zone4"></textarea>
</form>

<script src="jquery.js"></script>
<script>
  $(function() {
    var leFocus;  
    $('input, textarea').focus( function() { 
      leFocus = $(this).attr('id');        
      $('#status').text(leFocus + ' a le focus');
    }); 
  });
</script>

Une fois la variable leFocus définie, le DOM est parcouru pour trouver quelle balise <input> ou <textarea> a le focus :

$('input, textarea').focus( function() {

Le nom de la balise qui a le focus est alors récupéré dans la fonction de retour. Le mot-clé this correspond à l'élément qui a le focus. Ici, nous extrayons son attribut id avec la méthode attr() :

leFocus = $(this).attr('id');

Le nom de l'identifiant est enfin affiché dans la balise <span> :

$('#status').text(leFocus + ' a le focus');

Mise en évidence de l'élément qui a le focus

Vous venez d'apprendre à identifier l'élément qui a le focus dans un formulaire. Je vous propose maintenant de modifier la mise en forme de cet élément. Pour cela, vous allez devoir vous intéresser non seulement à l'élément qui gagne le focus (méthode focus()), mais également à celui qui le perd (méthode blur()). Sans quoi, après quelques clics, il sera impossible de savoir quel élément a le focus, car ils auront tous la même mise en forme !

Dans l'exemple suivant, nous allons agir sur la couleur d'arrière-plan des éléments qui gagnent et qui perdent le focus. Mais rien ne vous empêche d'agir sur une ou plusieurs autres propriétés. Voici le code utilisé :

<span id="status">Cliquez sur un des éléments du formulaire</span><br /><br />
<form>
  <input type="text" id="zone1"><br />
  <input type="text" id="zone2"><br />
  <input type="text" id="zone3"><br />
  <textarea id="zone4"></textarea>
</form>    

<script src="jquery.js"></script>
<script>
  $(function() {
    var leFocus;  
    $('input, textarea').focus( function() { 
      leFocus = '#' + $(this).attr('id');        
      $(leFocus).css('background-color', '#afc');
    }); 
    $('input, textarea').blur( function() { 
      leFocus = '#' + $(this).attr('id');        
      $(leFocus).css('background-color', '#fff');
    }); 
  });
</script>

Essayer

Une fois la variable leFocus définie, la méthode focus() est utilisée pour savoir quel élément acquiert le focus :

$('input, textarea').focus( function() {

La variable leFocus est alors initialisée avec l'identifiant de cet élément, précédé du signe # :

leFocus = '#' + $(this).attr('id');

La variable leFocus est directement utilisable dans un sélecteur jQuery. En agissant sur la propriété CSS background-color, la couleur d'arrière-plan de l'élément change dès que celui-ci acquiert le focus :

$(leFocus).css('background-color', '#afc');

Il reste maintenant à modifier la couleur d'arrière-plan de l'élément qui a perdu le focus, s'il existe un tel élément. Pour cela, nous faisons appel à la méthode blur(), en l'appliquant aux éléments <input> et <textarea> du document :

$('input, textarea').blur( function() {

Comme dans la requête jQuery précédente, l'identifiant de l'élément est mémorisé dans la variable leFocus :

leFocus = '#' + $(this).attr('id');

Il suffit maintenant d'utiliser cette variable dans un sélecteur pour modifier la couleur d'arrière-plan de l'élément qui a perdu le focus :

$(leFocus).css('background-color', '#fff');

Vider un formulaire

Pour annuler les données saisies dans un formulaire, il suffit d'utiliser un bouton reset :

<input type="reset" id="annuler" value="Annuler">

Si vous le souhaitez, cette action peut également être accomplie en jQuery.
Mettez en place un bouton de remise à zéro du formulaire :

<button id="raz">RAZ du formulaire</button>

Capturez l'événement click sur ce bouton et exécutez la fonction efface_formulaire() (ou tout autre nom qui vous conviendra) :

$('#raz').click(efface_formulaire);

Et voici le code de cette fonction :

function efface_formulaire () {
  $(':input')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .prop('checked', false)
   .prop('selected', false);
}

Un sélecteur jQuery sélectionne toutes les balises <input> du document, en dehors des éléments button, submit, reset et hidden :

$(':input')
.not(':button, :submit, :reset, :hidden')

Les valeurs de ces éléments (si elles existent) sont supprimées :

.val('')

Puis, s'ils existent, les attributs checked et selected sont supprimés :

.prop('checked', false)
.prop('selected', false);

Validation de formulaires

Vous voulez valider les données saisies par l'utilisateur dans un de vos formulaires ? En testant par exemple que l'adresse e-mail entrée est bien formée, ou encore que la date d'anniversaire est bien une date ? Le plus simple consiste à utiliser un plugin. Arrivés à ce point dans le cours, vous ne savez pas encore comment utiliser des plugins dans jQuery, mais figurez-vous que c'est justement le sujet d'une prochaine partie. Si vous n'avez pas la patience d'attendre jusque-là, reportez-vous au premier chapitre de la partie consacrée aux plugins.

Les tableaux

La fonction $.grep()

Cette fonction trouve les éléments du tableau qui satisfont un ou plusieurs critères. Voici sa syntaxe :

var tableau2 = $.grep(tableau, function(élément, index) { … }, inv);

… où :

  • tableau est le tableau qui contient les données à filtrer ;

  • élément et index sont les éléments et l'index des éléments du tableau ;

  • inv indique si le critère doit (true) ou ne doit pas (false ou n'est pas spécifié) être inversé.

Un peu de pratique serait vraiment bienvenue. Voici donc quelques lignes de code. Deux balises <span> seront utilisées pour afficher les résultats et trois boutons de commande pour filtrer le tableau de départ selon différents critères :

<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="filtre1">Après le cinquième</button>
<button id="filtre2">Différent de Mathis, Hugo et Yanis</button>
<button id="filtre3">Avant le cinquième</button>


<script src="jquery.js"></script>
<script>
  $(function() {
    var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé', 'Nathan', 'Manon', 'Noah', 'Sarah ', 'Louis', 'Luna', 'Kylian', 'Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Théo', 'Zoé', 'Yanis', 'Maélys'];
    var tableau2;
    $('#un').text('Données originales : ' + tableau.join(', '));
    $('#filtre1').click(function() {
      tableau2 = $.grep(tableau, function(el,ind) {
        return (ind > 4);
      });
      $('#deux').text('Après le cinquième : ' + tableau2.join(', '));
    });
    $('#filtre2').click(function() {
      tableau2 = $.grep(tableau, function(el,ind) {
        return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
      });
      $('#deux').text('Différent de Mathis, Hugo et Yanis : ' + tableau2.join(', '));
    });
    $('#filtre3').click(function() {
      tableau2 = $.grep(tableau, function(el,ind) {
        return (ind > 4);
      }, true);
      $('#deux').text('Avant le cinquième : ' + tableau2.join(', '));
    });
  }); 
</script>

Essayer

Le code jQuery commence par définir le tableau et y stocker quelques prénoms, puis définit le tableau dans lequel seront stockés les résultats :

$(function() {
  var tableau = ['Luca', '…' 'Maélys'];
  var tableau2;

L'instruction suivante lit les données stockées dans le tableau et les copie dans la première balise <span> en les séparant par une virgule et une espace :

$('#un').text('Données originales : ' + tableau.join(', '));

Lorsque le premier bouton est cliqué :

$('#filtre1').click(function() {

… la fonction grep() est appliquée au tableau en ne sélectionnant que les éléments dont l'index est supérieur à 5 (la valeur 4 s'explique par le fait que le premier élément a un index égal à 0) :

tableau2 = $.grep(tableau, function(el,ind) {
  return (ind > 4);
});

Le tableau mis à jour par la fonction grep() est alors affiché dans la deuxième balise <span> :

$('#deux').text('Après le cinquième : ' + tableau2.join(', '));

Lorsque le deuxième bouton est cliqué, la fonction grep() est appliquée au tableau. Seuls les éléments différents de « Mathis », « Hugo » et « Yanis » sont conservés :

tableau2 = $.grep(tableau, function(el,ind) {
  return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
});

Puis le résultat est affiché dans la deuxième balise <span>.

Enfin, lorsque le troisième bouton est cliqué, la fonction grep() est appliquée au tableau en ne conservant que les éléments d'indice supérieur à 5. Étant donné que le troisième paramètre a pour valeur true, le critère de sélection est inversé. Ce sont donc les éléments d'indice inférieur à 5 qui seront affichés :

tableau2 = $.grep(tableau, function(el,ind) {
  return (ind > 4);
}, true);

Le résultat est affiché dans la deuxième balise <span>.

La fonction $.map()

Cette fonction recopie en partie ou en totalité un tableau en lui appliquant un traitement. Voici sa syntaxe :

tableau2 = $.map(tableau, function(el, ind) { … });

… où :

  • tableau est le tableau qui contient les données à recopier ;

  • élément et index sont les éléments et l'index des éléments du tableau ;

  • tableau2 est le tableau dans lequel sont stockés les résultats de la fonction map().

Afin que ce soit plus clair, nous allons travailler sur un exemple concret. Deux balises <span> sont utilisées pour afficher les résultats et deux boutons de commande pour recopier le tableau de départ en lui appliquant deux traitements différents :

<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="copie1">Prénoms en majuscules</button>
<button id="copie2">Index et prénoms en minuscules</button>

<script src="jquery.js"></script>
<script>
  $(function() {
	var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];
	var tableau2;
	$('#un').text('Données originales : ' + tableau.join(', '));
	$('#copie1').click(function() {
	  tableau2 = $.map(tableau, function(el,ind) {
		return (el.toUpperCase());
	  });
	  $('#deux').text('Prénoms en majuscules : ' + tableau2.join(', '));
	});
	$('#copie2').click(function() {
	  tableau2 = $.map(tableau, function(el,ind) {
		return (ind + ' : ' + el.toLowerCase());
	  });
	  $('#deux').text('Index et prénoms en minuscules : ' + tableau2.join(', '));
	});
  }); 
</script>

Essayer

Les premières instructions jQuery définissent le tableau de départ et le tableau dans lequel se feront les copies et affichent le tableau de départ :

$(function() {
  var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];
  var tableau2;
  $('#un').text('Données originales : ' + tableau.join(', '));

Lorsque le premier bouton est cliqué, la fonction map() est appliquée au tableau. Les prénoms sont retournés en caractères majuscules et stockés dans tableau2 :

tableau2 = $.map(tableau, function(el,ind) {
  return (el.toUpperCase());

Ce tableau est alors affiché dans la deuxième balise <span> :

$('#deux').text('Prénoms en majuscules : ' + tableau2.join(', '));

Lorsque le deuxième bouton est cliqué, la fonction map() est appliquée au tableau. Chacun des éléments du tableau est transformé en une chaîne contenant l'index du tableau suivi du séparateur « : » et du prénom converti en caractères minuscules :

tableau2 = $.map(tableau, function(el,ind) {
  return (ind + ' : ' + el.toLowerCase());

Comme précédemment, le résultat est affiché dans la deuxième balise <span>.

La fonction $.inArray()

Vous recherchez un élément dans un tableau ? La fonction inArray() est là pour vous. Voici sa syntaxe :

var position = $.inArray('valeur', tableau, index)

… où :

  • valeur est la valeur recherchée ;

  • tableau est le tableau dans lequel doit se faire la recherche ;

  • index, s'il est précisé, est le numéro de la cellule à partir de laquelle doit commencer la recherche (attention, la première cellule a pour index 0) ;

  • position est la première position de la valeur dans le tableau. Si la recherche est infructueuse, inArray() retourne -1.

Supposons que la variable tableau soit définie comme suit :

var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];

Le tableau suivant indique quelques exemples de valeurs retournées par la fonction inArray().

Instruction

Valeur retournée

$.inArray('Emma',tableau)

1

$.inArray('Léa',tableau)

4

$.inArray('Luca',tableau, 5)

-1 car Luca se trouve en position 0 et non après la position 5

$.inArray('Alfred',tableau)

-1 car Alfred n'est pas dans le tableau

La fonction $.merge()

Il est parfois nécessaire de regrouper les informations qui se trouvent dans deux tableaux. La fonction merge() est là pour vous faciliter la tâche. Voici sa syntaxe :

$.merge(tableau1, tableau2);

… où tableau1 et tableau2 sont les deux tableaux à regrouper. Lorsque la fonction a été exécutée, le premier tableau contient ses propres données et celles du deuxième tableau. Par exemple :

var tableau1 = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];
var tableau2 = ['Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Théo'];
$.merge(tableau1, tableau2); 
alert(tableau1.join(', '));

Ce qui donne la figure suivante.

Le premier tableau contient ses propres données et celles du deuxième tableau
Le premier tableau contient ses propres données et celles du deuxième tableau
  • Pour donner le focus à un élément d'un formulaire, vous utiliserez l'instruction $('élément').focus();.

  • Pour savoir quel élément a le focus dans un formulaire, commencez par parcourir le DOM avec l'instruction $('input, textarea').focus( function() { … });. Utilisez ensuite l'instruction var idFocus = $(this).attr('id'); pour récupérer l'identifiant de l'élément qui a le focus.

  • Pour vider le contenu d'un formulaire, vous devez lui appliquer les méthodes val(''), removeAttr('checked') et removeAttr('selected'). Si la page ne contient qu'un formulaire, vous pouvez la rafraîchir avec l'instruction location.reload();.

  • La fonction $.grep() sélectionne certains éléments dans un tableau et les copie dans un autre tableau.

  • La fonction $.map() recopie les éléments d'un tableau dans un autre tableau en leur appliquant un traitement.

  • La fonction $.inArray() recherche si un élément particulier est présent dans un tableau.

  • La fonction $.merge() regroupe les informations qui se trouvent dans deux tableaux.

Exemple de certificat de réussite
Exemple de certificat de réussite