Te donner toutes les explications va prendre pas mal de temps, voilà une page avec ce que tu cherches. Je me suis monté ça il y a quelques temps pour des besoins persos. Pour ma part, j'ai utilisé un tableau html, mais c'est faisable éventuellement sans. Je te laisse voir le fonctionnement. Note bien que coté JavaScript, je me sers du DOM (Document Object Model) pour créer les nouvelles lignes. Chaque détail est important.
Voici l'exemple :
<?php
session_start();
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Ajout dynamique de lignes de saisie dans un formulaire</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
body {
font-family: verdana, helvetica, sans-serif;
font-size: 85% !important;
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
padding: 0.25em;
}
form {
width: 300px;
position: relative;
top: 5em;
left: 50%;
margin-left: -150px;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
function ajoutligne(i)
{
var f = document.forms['test'];
var j = i + 1;
var idNom = 'nom_'+ i;
var lignes = document.getElementById('table_form');
/**
* Comptage des lignes du lignes :
* tous les éléments
* moins le bouton submit
* et le reste divisé par le nombre de colonnes (ici 3)
*/
var nbl = (f.elements.length - 2) / 3;
var chaine = '';
/* D'abord, on récupère les valeurs courantes du formulaire */
var noms = new Array;
var prenoms = new Array;
for(var l = 0; l < nbl; l++)
{
var index_n = 'nom_'+ l;
var index_p = 'prenom_'+ l;
noms[l] = f.elements[index_n].value;
prenoms[l] = f.elements[index_p].value;
}
/* Si on est sur la dernière ligne et que la valeur nom n'est pas vide, on rajoute la ligne de lignes */
if(f.elements[idNom].value != '')
{
if(i == (nbl - 1))
{
/* Construction de la chaine vide à ajouter éventuellement */
/* Ajout d'une ligne vide */
var nouvelleLigne = document.createElement("tr");
var creerLigne = lignes.appendChild(nouvelleLigne);
/* Création des cellules */
var cell_1 = document.createElement("td");
var cell_2 = document.createElement("td");
var cell_3 = document.createElement("td");
/* Insertion des cellules dans la ligne */
var creerCell_1 = creerLigne.appendChild(cell_1);
var creerCell_2 = creerLigne.appendChild(cell_2);
var creerCell_3 = creerLigne.appendChild(cell_3);
/* Création des champs de formulaire */
var champ_1 = document.createElement("input");
var champ_2 = document.createElement("input");
var champ_3 = document.createElement("input");
/* Création des attributs pour chaque champ */
/**
* On commence par vérifier le navigateur utilisé.
* Si en effet on a besoin d'un gestionnaire d'évènement, Internet explorer n'interprètera pas
* de la même manière l'attribut ajouté.
*/
var isExplorer = ((navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && (navigator.userAgent.toLowerCase().indexOf('opera') == -1)) ? true : false;
if(isExplorer == true)
{
/* Le navigateur est Internet Explorer */
var idChamp = 'nom_'+ j;
champ_1.onchange = function(){if(document.forms['test'].elements[idChamp].value != ''){ajout();}};
}
else
{
champ_1.setAttribute("onchange", "if(this.value != ''){ajout();}");
}
/* Ajout des autres attributs de la balise */
champ_1.setAttribute("type", "text");
champ_1.setAttribute("name", "nom[]");
champ_1.setAttribute("id", "nom_"+ j);
champ_1.setAttribute("title", "Inscrivez un nom de famille");
champ_1.setAttribute("value", "");
champ_2.setAttribute("type", "text");
champ_2.setAttribute("name", "prenom[]");
champ_2.setAttribute("id", "prenom_"+ j);
champ_2.setAttribute("title", "Inscrivez un prénom");
champ_2.setAttribute("value", "");
champ_3.setAttribute("type", "checkbox");
champ_3.setAttribute("name", "supprligne[]");
champ_3.setAttribute("id", "supprligne"+ j);
champ_3.setAttribute("title", "Supprimer la ligne");
/* Insertion des champs dans chaque cellule */
creerCell_1.appendChild(champ_1);
creerCell_2.appendChild(champ_2);
creerCell_3.appendChild(champ_3);
var idPrenom = 'prenom_'+ i;
f.elements[idPrenom].focus();
/* Ajout dans la page d'une ligne supplémentaire indiquant le nombre de lignes ajoutées */
var info = document.createElement('p');
f.appendChild(info);
info.setAttribute('style', 'font-size: 10px;');
var j = i;
j = (j + 2);
info.appendChild(document.createTextNode('Création de la ligne '+ (j)))
}
}
else
{
alert('Le premier champ de la dernière ligne (ligne '+ nbl +') est vide.\n Aucune nouvelle ligne ne pourra être ajoutée.');
}
}
function ajout()
{
/* Comptage du nombre de lignes en cours */
var compte = (((document.forms['test'].elements.length) - 2) / 3) -1;
// alert(compte);
ajoutligne(compte);
}
/* ]]> */
</script>
</head>
<body>
<?php
if(isset($_POST['envoi']))
{
echo("<pre>\n");
var_dump($_POST);
echo("</pre>\n");
}
?>
<form id="test" action="" method="post">
<?php
/**
* Initialisation d'un pointeur de départ pour les attributs id des champs de saisie du formulaire.
* On ne peut en effet pas avoir deux fois le même identifiant dans une même page HTML. Donc à chaque
* ligne ajoutée, il faudra un nouvel identifiant. Ce dernier sera géré dynamiquement en JavaScript.
*/
$i = 0;
?>
<table summary="">
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Supprimer</th>
</tr>
</thead>
<tbody id="table_form" >
<tr>
<td><input type="text" name="nom[]" id="nom_<?php echo($i); ?>" title="Inscrivez un nom de famille" value="" onchange="if(this.value != ''){ajout();}" /></td>
<td><input type="text" name="prenom[]" id="prenom_<?php echo($i); ?>" title="Inscrivez un prénom" value="" /></td>
<td><input type="checkbox" name="supprligne[]" id="supprligne<?php echo($i); ?>" title="Supprimer la ligne" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="submit" name="envoi" id="envoi" value="Valider" />
<input type="button" name="cnl" id="cnl" value="Ajouter une ligne de saisie" onclick="ajout();" />
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
Voilà, la page est complète, je n'aurai pas beaucoup de temps dans les jours à venir pour les explications, donc si tu as des questions, sois le plus précis possible
