Après le précédent billet présentant la fonction clone de JQuery, j’ai décidé de te parler d’une autre fonction méconnue de JQuery : la fonction serialize.

Alors que fait-elle cette fonction ?

Pour appeler serialize, il faut avoir en sélecteur un formulaire. Serialize va tout simplement retourner une chaine de caractères contenant toutes les valeurs des champs de ce formulaire. La chaine est formatée pour être envoyée en Ajax par la suite ( de type champ1=valeur1&champ2=valeur2&champ3=valeur3… ). La où la fonction serialize va être utile, c’est qu’elle permet de créer une fonction qui va permettre d’envoyer n’importe quel formulaire en Ajax avec une seule fonction.

Comme d’habitude, la demo est par là :
demo de la fonction serialize

Admettons que l’on ajoute la classe « ajax » à tous les formulaires que l’on souhaite envoyer en Ajax :

<form class="ajax" action="data.php" method="post">
     <p>
          <label for="nom">Nom :</label>
          <input type="text" name="nom" id="nom" />
     </p>
     <p>
          <label for="email">Email :</label>
          <input type="text" name="email" id="email" />
     </p>
     <p>
          <input type="hidden" name="typeform" value="inscription" />
          <input type="submit" value="inscription" />
     </p>
</form>

Ici, j’ai créé un formulaire d’inscription simple demandant seulement un nom et un email. Un champ caché (nommé typeform) va permettre de différencier le formulaire des autres pour le traitement en PHP (en assumant que tous les traitements en Ajax se passe dans le même fichier).

Le JQuery va être ici très simple (en connaissant les bases de JQuery ) :

$('form.ajax').submit( function(e) {
     e.preventDefault(); // on empeche l'envoi du formulaire par le navigateur
     var datas = $(this).serialize();
     $.ajax({
          type: 'POST',      // envoi des données en POST
          url: $(this).attr('action'),     // envoi au fichier défini dans l'attribut action
          data: datas,     // sélection des champs à envoyer
          success: function(msg) {     // callback en cas de succès
               alert('success : '+datas);
          }
     });
});

C’était simple non ? La fonction serialize de JQuery est toute simple, mais super utile ! Elle permet vraiment de factoriser le code.

JQuery propose par défaut des tas de fonctions super utiles mais qui sont assez peu utilisées. J’ai découvert la fonction clone il y a peu (en jetant un oeil sur mon mémento JQuery 1.4). Tu l’as peut-être deviné, la fonction clone() permet de dupliquer un élément du DOM dans la page.

Comme d’hab, je t’ai préparé une petite démo :

Demo

Pour mon exemple on va dupliquer une liste déroulante <select> (en fait tout le paragraphe qui le contient) pour permettre à l’utilisateur de sélectionner plusieurs catégories :

     <label for="categorie">Choisissez une catégorie :</label>
<select class="cat" name="categorie[]">
          <option>Sélectionnez une catégorie</option>
          <option value="jquery">JQuery</option>
          <option value="html">HTML</option>
          <option value="php">PHP</option>
          <option value="css">CSS</option>
     </select>

Les crochets à la fin de l’attribut name du select nous permettra de récupérer les valeurs des plusieurs select dupliqués en faisant un simple foreach (en PHP).

Passons maintenant à la partie JQuery (attention ça va aller très vite !) :

$(document).ready(function() {
     $('select.cat:last').live('change',function(){
          if( $(this).val() != '' )
          {
               $(this).parent().clone(true).insertAfter($(this).parent());
          }
     });
});

Et voilà ! Comme tu le sais probablement déjà la ligne 1 permet d’attendre que la page soit fini de charger (que le DOM soit ready).

A la ligne 2, le sélecteur select.cat:last permet de sélectionner uniquement le dernier select ayant la classe « cat ». Pour plus de renseignements sur l’événement « live », je t’invite à relire mon précédent article sur ce sujet. Donc quand la valeur de ce dernier select change, on exécute la suite.

La ligne 3 permet de tester si la valeur du select n’est pas vide.

L’astuce du jour se trouve véritablement à la ligne 5. Tout d’abord on sélectionne le parent du select (.parent()). On a donc tout le paragraphe. Ensuite on clone ce paragraphe (.clone()) et on l’insère après (insertAfter()) le paragraphe contenant le dernier select.

Ce n’était pas si compliqué que ça ?

Et enfin, et parce que je suis super sympa, voici comment on récupère les valeurs en PHP de tous les select générés :

if( !empty( $_POST['categorie'] ) )
{
     foreach( $_POST['categorie'] as $categorie )
     {
          echo $categorie . '
';
          // faire ici le traitement voulu, le foreach va parcourir toutes les catégories du tableau
     }
}

Voili, voilou (comme dirait Flanders), c’était le retour des articles avec plein de JQuery dedans. Tiens-toi prêt, j’ai d’autres petites astuces en stock !