Champs modulable d'un formulaire
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
http://img11.hostingpics.net/thumbs/mini_617223test.jpg
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 :oops:
Code:
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
