J'ai trouvé (presque) mon bonheur : http://www.commentcamarche.net/forum/affich-7063989-javascript-ajout-de-champ-dynamique
J'ai adapté le code mais il reste un problème quand je rajoute un champ, je vide les autres... Mais pas quand je supprime un champ. Il y a bien une solution de proposé mais je ne sais pas comment l'utiliser! Il n'y a pas plus simple?
<?
$n_champ = $_POST['n']; //Nombre de champs envoyés par le formulaire
for ($n=0; $n<=$n_champ; $n++){ //Boucle pour charger en variable les données envoyées
$champ[] = $_POST['champ_'.$n];
}
?>
<html>
<head>
<title>Test ajout de champs dans un formulaire</title>
<script language="javascript" src="champsDynamiques.js"></script> <!-- chemin du javascript -->
</head>
<!-- Créer le 1er champ -->
<?
echo "Nombre de champs envoyer par le formulaire : ".$n_champ."
";
for ($n=0; $n<=$n_champ; $n++){ //Boucle pour afficher les données envoyées
if ($_POST['champ_'.$n] <> null){ //Pour ne pas afficher les champs vides
echo "champ ".$n." : ".$champ[$n]."
";
}
}
?>
<form name="dates" method="post" action=""> <!-- Début du formulaire -->
<!-- Affiche le résultat de la fonction javascript -->
</form>
</html>
var i = 1;
function creer_champ(){
document.getElementById('champs').innerHTML +="
"+ // Donne un id au champ en fonction de la variable i
"Champ "+i+" :"+ // le champ qui va être envoyé (le champ a pour nom : champ_"variable_i")
""+ // champ caché pour envoyer le nombre de champs créés (variable i)
""+ // Bouton pour supprimer un champ
"
";
i++;
}
function supprime_champ(i){
var parent = document.getElementById("champs_"+i).parentNode;
parent.removeChild(document.getElementById("champs_"+i));
}