ferr.fr - Mémoire de l'informatique

Formulaire HTML5 : ajout dynamique de champs <input>

Codé avec la version 7.4.4. de PHP

Voici un formulaire pour saisir le prénom et le nom d’une personne :

<!DOCTYPE html>

<html>

  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <form action="./contenu_formulaire.php" method="GET">
      <input type="text" placeholder="Prénom ?" name="prenom" value="">
      <input type="text" placeholder="Nom ?" name="nom" value="">
      <p> <input type="submit"> </p>  
    </form>
  </body>

</html>

Et voici le script dans le fichier contenu_formulaire.php qui sera exécuté lorsqu’on cliquera sur le bouton :

<!DOCTYPE html>

<html>

  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <p>Voici les valeurs retournées par le formulaire :</p>
    <p> <?php var_dump($_GET); ?> </p>
  </body>

</html>

Lors de l’exécution du formulaire, cela donnera :

Ce formulaire est statique, c’est-à-dire que l’utilisateur ne peut pas modifier le nombre d’informations à saisir.

Si la quantité des informations à renseigner n’est pas connue à l’avance, il faut prévoir un formulaire dynamique. Dans ce cas, le langage HTML n’est pas suffisant. Soit on utilisera un langage côté client (javascript par exemple) soit on utilisera un langage côté serveur. C’est ce second choix qui sera développé avec PHP.

Le PHP permet de générer du code HTML mais à la différence de Javascript, il faudra recharger la page après l’intervention de l’utilisateur.

Imaginons qu’on doive saisir les nom et prénom de plusieurs personnes. Il faut alors prévoir un mécanisme pour ajouter des lignes de saisie. Dans notre exemple l’utilisateur devra cliquer sur cette image : bouton ajouter

Comme il y aura plusieurs lignes à saisir, les variables $prenom et $nom deviendront des tableaux. La variable $i servira de clé.

Pour connaître le nombre de lignes à afficher, la méthode retenue sera de compter le nombre d’éléments dans le tableau.

Le script du formulaire entre les balises <body> et </body> est modifié ainsi :

<?php

if (isset($_GET['prenom']))                         // Second passage et suivants 
  {
    $ligne_ajoutee=count($_GET['prenom'])-1; 
    $prenom=$_GET['prenom'];
    $nom=$_GET['nom'];   
  }
else                                                // Premier passage dans le script
  {
    $ligne_ajoutee=0;                               // La 1re ligne a pour indice 0 
    $prenom[$ligne_ajoutee]="";                
    $nom[$ligne_ajoutee]="";   
  }

if (isset($_GET['ajouter_input_x']))                // Le bouton "+" vient d'être activé
  { 
    $ligne_ajoutee=$ligne_ajoutee+1; 
    $prenom[$ligne_ajoutee]="";                
    $nom[$ligne_ajoutee]="";
  }  

echo '<form action="./formulaire.php" method="GET">';
        for ($i=0;$i<=$ligne_ajoutee;$i++)
         {
echo      '<div>';
echo        '<input type="text" placeholder="Prénom ?" name="prenom['.$i.']" value="'.$prenom[$i].'">';
echo        '<input type="text" placeholder="Nom ?" name="nom['.$i.']" value="'.$nom[$i].'">';
             if ($i==$ligne_ajoutee)
               {
echo            '<input type="image" width="20px" height="20px" name="ajouter_input" alt="ajouter" src="./bouton_ajouter.gif">';
               }
echo      '</div>';
         }
echo   '<input type="submit" formaction="./contenu_formulaire.php">';  
echo '</form>';

?>

Lors de l’exécution du formulaire modifié, cela donnera :

Si une ligne n’est plus nécessaire, il faut pouvoir la supprimer. Pour réaliser cette action, l’utilisateur devra cliquer sur cette image : bouton retirer

Cette action est plus délicate à réaliser. En effet, l’élément <input type="image"> n'accepte pas de valeur pour l'attribut value. Les seules valeurs transmises pour cet élément sont des coordonnées x et y lors du clic de la souris sur l’image. Ces coordonnées sont calculées en pixels à partir du coin en haut à gauche de l’image.

Pour identifier la ligne à supprimer, la méthode retenue sera d’utiliser l’attribut name associé à l’élément <input type="image">. Un tableau contiendra la valeur de l’attribut pour chaque ligne. La clé de ce tableau sera numérique et correspondra au numéro de la ligne. Elle permettra de retrouver l’image sur laquelle l’utilisateur a cliqué car ce sera la seule à retourner des coordonnées x et y.

Attention : la fonction array_key_first nécessite la version 7.3.0 ou supérieure de PHP.

Le script finalisé donnera ceci :

<?php

if (isset($_GET['prenom']))                         // Second passage et suivants 
  {
    $ligne_ajoutee=count($_GET['prenom'])-1; 
    $prenom=$_GET['prenom'];
    $nom=$_GET['nom'];   
  }
else                                                // Premier passage dans le script
  {
    $ligne_ajoutee=0;                               // La 1re ligne a pour indice 0 
    $prenom[$ligne_ajoutee]="";                
    $nom[$ligne_ajoutee]="";   
  }

if (isset($_GET['ajouter_input_x']))                // Le bouton "+" vient d'être activé
  { 
    $ligne_ajoutee=$ligne_ajoutee+1; 
    $prenom[$ligne_ajoutee]="";                
    $nom[$ligne_ajoutee]="";
  }  

if (isset($_GET['retirer_input']))                  // Le bouton "-" vient d'être activé
  {  
    $indice=array_key_first($_GET['retirer_input']);
    unset($prenom[$indice]);
    unset($nom[$indice]);
    $prenom=array_values($prenom);                  // Réindexation du tableau après suppression d'un élément
    $nom=array_values($nom);
    $ligne_ajoutee=$ligne_ajoutee-1;
  }

echo '<form action="./formulaire.php" method="GET">';
        for ($i=0;$i<=$ligne_ajoutee;$i++)
         {
echo      '<div>';
echo        '<input type="text" placeholder="Prénom ?" name="prenom['.$i.']" value="'.$prenom[$i].'">';
echo        '<input type="text" placeholder="Nom ?" name="nom['.$i.']" value="'.$nom[$i].'">';
             if ($i==$ligne_ajoutee)
               {
echo            '<input type="image" width="20px" height="20px" name="ajouter_input" alt="ajouter" src="./bouton_ajouter.gif">';
               }
             else
               {
echo            '<input type="image" width="20px" height="20px" name="retirer_input['.$i.']" alt="retirer" src="./bouton_retirer.gif">';
               }
echo      '</div>';
         }
echo   '<input type="submit" formaction="./contenu_formulaire.php">';  
echo '</form>';

?>

Pour bien comprendre le script gérant le retrait d'une ligne de formulaire, il faut se souvenir de deux contraintes de PHP :

Si le formulaire retourne un nom de variable contenant un point ou un espace, PHP convertit ces deux caractères en underscore (un tiret bas).
Si le formulaire retourne un nom de variable ayant une syntaxe valide pour un tableau, PHP ignore les caractères qui suivent.

Ainsi, si nous désirons supprimer la seconde ligne du formulaire (indice 1 du tableau) :

Les valeurs transmises à PHP sont les suivantes : http://localhost/ajout/formulaire.php?prenom[0]=Rip&nom[0]=Hunter&prenom[1]=Sara&nom[1]=Lance&retirer_input[1].x=10&retirer_input[1].y=11&prenom[2]=Mick&nom[2]=Rory

En simplifiant, voici ce que PHP va faire après que l'utilisateur aura cliqué sur l'image bouton retirer :

retirer_input[1].x=10 devient retirer_input[1]_x=10 puis retirer_input[1]=10
retirer_input[1].y=11 devient retirer_input[1]_y=11 puis retirer_input[1]=11

La variable retirer_input[1] étant valorisée deux fois, seule la dernière valorisation, c'est à dire 11, est prise en compte.

Pour PHP, les valeurs retournées par le formulaire sont les suivantes :

array(3) { ["prenom"]=> array(3) { [0]=> string(3) "Rip" [1]=> string(4) "Sara" [2]=> string(4) "Mick" }
           ["nom"]=> array(3) { [0]=> string(6) "Hunter" [1]=> string(5) "Lance" [2]=> string(4) "Rory" }
           ["retirer_input"]=> array(1) { [1]=> string(2) "11" } }