1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Formulaire Dynamique (Ajout, suppression)

Résolu
boudafc Messages postés 48 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 18 juillet 2008 - 20 août 2007 à 11:08
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
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>

5 réponses

Réponse 1 / 5
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 31
20 août 2007 à 12:33
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.
3
Réponse 2 / 5
boudafc Messages postés 48 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 18 juillet 2008
20 août 2007 à 16:51
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>
0
Réponse 3 / 5
boudafc Messages postés 48 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 18 juillet 2008
20 août 2007 à 16:59
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 !
0
Réponse 4 / 5
JypX Messages postés 67 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 6 février 2010
19 déc. 2009 à 21:41
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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
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
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));
}
0