Discussion :

[ddelec24]

Bonjour,
je fais appel à vos connaissances pour m'aider à comprendre comment je pourrais faire pour ajouter ou supprimer à la volée des zones de saisies.

mon code actuel ressemble a ceci:

Code :

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

1
2
3
4
5
6
7
8
9
<form action="<?=root?>ajout.php" method="post" id="form_ajout" name="form_ajout">
  <div id="step_form">
    <p>
      <input type="text" class="i_ajout" name="i_ajout_001" value="N°001" />
      <input type="text" class="i_ajout" name="i_label_001" />
   </p>
  </div>
  <input type="hidden" id="curval" value="001" />
</form>

J'aimerais maintenant avoir un bouton ajout qui mettra à la suite un second input comme suit:

Code :

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

1
2
3
4
5
 
<p>
   <input type="text" class="i_ajout" name="i_ajout_002" value="N°002" />
   <input type="text" class="i_ajout" name="i_label_002" />
</p>

J'ai pensé à un champs hidden qui contient la valeur courante pour pouvoir être récupéré et incrémenté lorsque j'ajoute un champs.
Pour la suppression par contre je ne sais pas trop comment faire...

J'ai recherché et jai vu ceci pour ajouter, j'utilise déjà prototype ailleurs donc j'aurais bien voulu l'utiliser ici aussi mais je n'ai rien vu pour supprimer la dernière occurrence (pas besoin de supprimer une intermédiaire, seulement la dernière).

Si quelqu'un connais un exemple semblable pour ajouter et supprimer à la volée des champs dans un formulaire.

Merci beaucoup pour vos lumières, DD


EDIT: javais pas vu ca: http://developpez.net/forums/showthread.php?t=252724
je regarde si ca correspond a ce que je souhaite!

[E.Bzz]

Bonjour,
comme d'habitude, il y a aussi des solutions dans la FAQ

A+

[ddelec24]

la FAQ est mal référencée dans google xD je déc
jai chercher sur google puis fait une recherche dans le forum javascript et la FAQ est pas ressortie dans les résultats.

voila mon code final pour les intéressés, l'architecture est comme suit:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<form name="form_ajout" ...>
   <div id="div_form">
      <div class="unlien">
         <span class="s_ajout">blabla</span><input class="i_ajout" ... />
         <span class="s_ajout">blabla</span><input class="i_ajout" ... />
         <span class="s_ajout">blabla</span><input class="i_ajout" ... />
         <span class="s_ajout">blabla</span><input class="i_ajout" ... />
      </div>
   </div>
</form>

et a chaque fois que j'appuis sur le bouton d'ajout, ca rajoute un div class="unlien" avec les 4 champs+labels avec les noms qui vont biens


et le code:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
function plus() {
	c=document.getElementById("div_form");
	// CREATION D'UNE SECTION EN PLUS
	cdiv=document.createElement("div");
	cdiv.setAttribute("class","un_lien");
	c.appendChild(cdiv);
 
	cspan = document.createElement("span");
	cspan.setAttribute("class","s_ajout");
	cdiv.appendChild(cspan);
	cspan.innerHTML = "Titre de l'épisode:";
 
	c2=c.getElementsByTagName("input");
	ch=document.createElement("input");
	if(((c2.length/4)+1) < 10) {
		if(pair(c2.length)) {
			curval = "00"+((c2.length/4)+1);
		} else {
			curval = "00"+((c2.length)/4);
		}
	} else {
		if(c2.length < 100) {
			if(pair(c2.length)) {
				curval = "0"+((c2.length/4)+1);
			} else {
				curval = "0"+(c2.length/4);
			}
		}
	}
 
	// TITRE
	ch.setAttribute("type","text");
	ch.setAttribute("name","titreep"+curval);
	ch.setAttribute("class","i_ajout");
	ch.setAttribute("value","Episode "+curval);
	cdiv.appendChild(ch);
 
	// LIEN
	cspan2 = document.createElement("span");
	cspan2.setAttribute("class","s_ajout");
	cdiv.appendChild(cspan2);
	cspan2.innerHTML = "Lien:";
	ch2=document.createElement("input");
	ch2.setAttribute("type","text");
	ch2.setAttribute("name","lienep"+curval);
	ch2.setAttribute("class","i_ajout");
	ch2.setAttribute("value","");
	cdiv.appendChild(ch2);
 
	// LIEN ALTERNATIF
	cspan2 = document.createElement("span");
	cspan2.setAttribute("class","s_ajout");
	cdiv.appendChild(cspan2);
	cspan2.innerHTML = "Lien alternatif:";
	ch2=document.createElement("input");
	ch2.setAttribute("type","text");
	ch2.setAttribute("name","lienep"+curval);
	ch2.setAttribute("class","i_ajout");
	ch2.setAttribute("value","");
	cdiv.appendChild(ch2);
 
	// TAILLE
	cspan2 = document.createElement("span");
	cspan2.setAttribute("class","s_ajout");
	cdiv.appendChild(cspan2);
	cspan2.innerHTML = "Taille:";
	ch2=document.createElement("input");
	ch2.setAttribute("type","text");
	ch2.setAttribute("name","lienep"+curval);
	ch2.setAttribute("class","i_ajout");
	ch2.setAttribute("value","");
	cdiv.appendChild(ch2);
 
	document.getElementById("sup").style.display="inline";
}
 
function moins(b){
	c=document.getElementById("div_form");
	cl=c.getElementsByTagName("div");
	if(!cl[1]){
		b.style.display="none";
	}
 
	if(cl[0]){	
		c.removeChild(cl[cl.length-1]);
	}
 
}