1. Accueil
  2. Codes-Sources
  3. Javascript / DHTML

Formulaire Dynamique (Ajout, suppression) [Résolu]

Signaler
Messages postés
48
Date d'inscription
mercredi 27 avril 2005
Statut
Membre
Dernière intervention
18 juillet 2008
 -
JypX
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
 -
Bonjour,


Voilà, j'essaye de créer un formulaire dynamique avec possibilité d'ajouter ou de supprimer des champs.

Pour le moment, je fais mon test sur l'ajout ou la suppression de boutons.


Le script que j'ai fait fonctionne bien la première fois, mais la deuxième pas correctement.

Par exemple, je créé 3 boutons la première fois que je supprime (en
cliquant dessus). La seconde fois, je ne pourrais supprimer que le
quatrième !


Je viens de voir pourquoi ça ne fonctionne pas (eh oui, je réfléchi même pendant que j'écris mon post !)

C'est que je supprime ce qu'il y a entre les balises que
j'ai créé dynamiquement, mais je n'éfface pas la balise !!!


Si quelqu'un a une idée ou une autre technique, merci !


Mon script:

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
<!--
var n = 0;
function ajout() {
    n++;
    document.getElementById('toto').innerHTML += '

';
    document.getElementById('tata').value = n;
}

function supprimer(k) {

    if( n >= 0) {
        document.getElementById(k).innerHTML = '';
        n--;
        document.getElementById('tata').value = n;
    }
}
//-->
</script>
</HEAD>

<form  id="frm">
   
   
   
   
</form>

</HTML>
Afficher la suite
A voir également:

5 réponses

Réponse 1 / 5
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 30
Bonjour,

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.

<hr />



Cordialement            Bul         [mon Site]     [M'écrire]
<hr />


En général, c'est absurde de généraliser.
Réponse 2 / 5
Messages postés
48
Date d'inscription
mercredi 27 avril 2005
Statut
Membre
Dernière intervention
18 juillet 2008
Hello !

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>
Réponse 3 / 5
Messages postés
48
Date d'inscription
mercredi 27 avril 2005
Statut
Membre
Dernière intervention
18 juillet 2008
Oublier ce que j'ai dis plus en haut pour la mise en page... je viens de trouver quelque chose... je viendrais compléter mon code plus tard !
Réponse 4 / 5
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
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 : 
<tr>

      <td>Nom</td>

      <td></td>
      <td>Prénom</td>

      <td></td>
</tr>
Réponse 5 / 5
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
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));
}
Répondre Posez votre question