Posez votre question Signaler

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

Messages postés
48
Date d'inscription
mercredi 27 avril 2005
Statut
Membre
Dernière intervention
18 juillet 2008
 - - Dernière réponse : JypX
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
 - 21 déc. 2009 à 12:22
Javascript / DHTML Posez votre question Signaler
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 

Votre réponse

Répondre au sujet

5 réponses

Meilleure réponse
Signaler Commenter la réponse de cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 26
3
Merci
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.

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 141 internautes nous ont dit merci ce mois-ci

Commenter la réponse de cs_bultez
Signaler Commenter la réponse de boudafc
Messages postés
48
Date d'inscription
mercredi 27 avril 2005
Statut
Membre
Dernière intervention
18 juillet 2008
0
Merci
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>
Commenter la réponse de boudafc
Signaler Commenter la réponse de boudafc
Messages postés
48
Date d'inscription
mercredi 27 avril 2005
Statut
Membre
Dernière intervention
18 juillet 2008
0
Merci
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 !
Commenter la réponse de boudafc
Signaler Commenter la réponse de JypX
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
0
Merci
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>
Commenter la réponse de JypX
Signaler Commenter la réponse de JypX
Messages postés
67
Date d'inscription
lundi 21 décembre 2009
Statut
Membre
Dernière intervention
6 février 2010
0
Merci
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));
}
Commenter la réponse de JypX

Votre réponse

Répondre au sujet
Posez votre question