si tu veux gérer "normalement" (?) les ajouts/suppressions/modifications...
d'éléments dans un formulaire ou ailleurs,
regarder du coté des ...node..,...child... ici par exemple
innerHTML, c'est très pratique pour ajouter, tout effacer...
mais les performances se dégradent si "on en abuse", et
les modif,supressions partielles... connait pas.
Merci beaucoup, ça m'a beaucoup aidé, j'ai reussi à faire ce que je voulais en terme de fonctionnalité, cependant, en terme de mise en page, pas évident, je souhaiterais au moins, sauter une ligne entre chaque champs... si quelqu'un a une idée !
Je met le code que j'ai fait, ça peut toujours aider quelqu'un:
<html><head><title>Test</title></head>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
var n = 0;
function supprimer() {
document.getElementById("Ingredients").removeChild(document.getElementById(n));
n--;
}
function ajouter() {
n++;
var nouveauChampsTexte = document.createElement("input");
var nouveauMaillon = document.getElementById("Ingredients").appendChild(nouveauChampsTexte);
nouveauMaillon.type="text";
nouveauMaillon.id=n;
nouveauMaillon.name=n;
nouveauMaillon.value=n
}
//-->
</script>
</html>
Ce code se rapproche ce que j'aimerai faire. A la place de rajouter un champ "text", j'aimerai rajouter du code html pour rajouter des lignes de plusieurs champs (text, select, etc...) à un formulaire en rajoutant la variable n au nom de chaque champs :
ex :
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));
}
a aidé 86 internautes ce mois-ci