Champs modulable d'un formulaire

**UHU_stic** · 16/08/2010, 14h34

Bonjour à tous, je suis nouveau sur le forum et j'ai une question qui vous parraîtra peut-être bête mais je bloque depuis quelques temps dessus.
Je vous plante le décors. Je code en javascript un système de champs de formulaire modifiable (une sorte de CMS pour saisie en ligne)

je vous met une image qui vous parlera plus

Les champs qui y figurent on été ajoutés grâce au bouton + du haut qui est voué à disparaître.
Ce que je souhaite:
1) Dans un premier temps, faire exactement la même chose avec les boutons + de droite
2) Ensuite, en fonction du + choisit, intercaler le nouveau champs entre deux déjà existant

Mon problème est que mon premier + appelle une fonction qui créée un input text, et deux img avec des fonction reliée à celle ci.
La croix supprime bien le champs puisque la fonction est déclarée et définie en même temps. En revanche les + individuels ne fonctionnent pas puisque l'appel se fait dans la définition de ma fonction.
J'ai donc un message d'erreur "Out of memory at line 8"

Je vous join le code pour que cela soit plus clair et si je m'exprime mal pardon d'avance

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<html>
   <head>
      <title>Utilisation du dom</title>
      <script type="text/javascript">
          var compteur = 0;
         function ajouter(){
            // On récupère le fieldset
            var conteneur = document.getElementById('formulaire');
            /**
            * Création des éléments dont on a besoin :
            * Un div dans lequel on mettra notre champ texte et une image
            * qui nous servira à enlever ensuite le div.
            *
            * En utilisant un div ça sera plus facile car sinon
            * on aurais du enlever le champ texte et l'image séparément.
            */
            var undiv = document.createElement('div');
            var text = document.createElement('input');
            var add = document.createElement('img');
            var del = document.createElement('img');
 
            text.name = 'mesfichiers[]';
            text.type = 'text';
            add.src = "+.jpg";
            del.src = "X.jpg";
 
            // nous sommes dans la fonction ajouter et donc problème de mémoire en l'appelant dans elle même semble-t-il.
            add.onclick = ajouter();
 
            // On enlève sur le click de la croix
            del.onclick = function(){
               // Elément à enlever
               lediv = this.parentNode;
               // Elément auquel on enlève
               lefieldset = lediv.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv);
            }
 
            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On pourrait aussi utiliser createTextNode pour ajouter du texte apres la croix
            */
            undiv.appendChild(text);
            undiv.appendChild(add);
            undiv.appendChild(del);
 
            // Ajout du div :
            conteneur.appendChild(undiv);
         }
      </script>
   </head>
   <body>
      <form action='mapage.php' method='post' enctype='multipart/form-data'>
         <fieldset id='formulaire'>
            <legend>Formulaire de saisie</legend>
            <img src="+.jpg" onclick='ajouter()' /><br />            
         </fieldset>
      </form>
   </body>
</html>

Merci d'avance pour vos réponses

**vermine** · 16/08/2010, 14h46

Bonjour:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
add.onclick = function(){ajouter();}

Par contre, ça ajoute la ligne à la fin. Peu importe la ligne du bouton sur lequel on a cliqué. Dans ce cas-là il faudrait passer l'élément courant en argument de la fonction et faire l'insertion selon cet élément.

**UHU_stic** · 16/08/2010, 14h52

Génial, ca fonctionne!!
Merci d'avoir répondu rapidement, je suis pas expert en javascript mais je vois le truc!
Si j'ai un doute je reviendrais

merci encore

**UHU_stic** · 17/08/2010, 15h46

Envoyé par vermine

Bonjour:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
add.onclick = function(){ajouter();}

Par contre, ça ajoute la ligne à la fin. Peu importe la ligne du bouton sur lequel on a cliqué. Dans ce cas-là il faudrait passer l'élément courant en argument de la fonction et faire l'insertion selon cet élément.

Pour passer l'élément courant on le récupère par parentNode sur son div?
et quelle méthode d'insertion est la plus appropriée?

Merci d'avance

**vermine** · 18/08/2010, 07h58

Je vous aurais bien dit "insertAfter" mais ça n'existe pas (certains l'ont recréée, à chercher sur le net). Donc il faut faire un insertBefore sur l'élément qui suit la div courante.

Champs modulable d'un formulaire

JavaScript

Discussions similaires

Partager

Partager