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

boudafc 48 Messages postés mercredi 27 avril 2005Date d'inscription 18 juillet 2008 Dernière intervention - 20 août 2007 à 11:08 - Dernière réponse : JypX 67 Messages postés lundi 21 décembre 2009Date d'inscription 6 février 2010 Dernière intervention
- 21 déc. 2009 à 12:22
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 

5 réponses

Répondre au sujet
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 20 août 2007 à 12:33
+3
Utile
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.
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de cs_bultez
boudafc 48 Messages postés mercredi 27 avril 2005Date d'inscription 18 juillet 2008 Dernière intervention - 20 août 2007 à 16:51
0
Utile
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
boudafc 48 Messages postés mercredi 27 avril 2005Date d'inscription 18 juillet 2008 Dernière intervention - 20 août 2007 à 16:59
0
Utile
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
JypX 67 Messages postés lundi 21 décembre 2009Date d'inscription 6 février 2010 Dernière intervention - 19 déc. 2009 à 21:41
0
Utile
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
JypX 67 Messages postés lundi 21 décembre 2009Date d'inscription 6 février 2010 Dernière intervention - 21 déc. 2009 à 12:22
0
Utile
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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.