Ajout / suppression de champ

**shnouf** · 04/12/2006, 15h30

Bonjour

J'ai cherché à créer une fonction javascript me permettant dans un premier temps supprimer un champ en cliquant sur un bouton et dans un second temps de faire réapparaître ce champ en cliquant sur un bouton qui est apparu lors du 1er clic.

Je vous montre mon 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
<script language="javascript">
	function remove_input()

{
var nb2 = nb + 1;
var i2 = i + 1;
var el=document.getElementById("1");//input à supprimer
document.getElementById('lechamps_'+i).innerHTML += '<br><span id="lechamps_'+i2+'"><a href="javascript:restaure_champ( '+nb2+', '+i2+')">Restaurer</a></span>';
el.parentNode.removeChild(el);

}
</script>

<script>
function restaure_champ ( nb, i ) {

var nb2 = nb + 1;
var i2 = i + 1;
document.getElementById('lechamps_'+i).innerHTML = '<input type="text" name="image[0]'+nb+'"></span>';


}
</script>

Code :

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

1
2
3
4
5
6
<tr>
						<td>Image "1"</td>
						<td> : </td>
						<td><input type ='file' name='image[0]' id='1'/></td> <td><span id="lechamps_4"><a href="/" OnClick="remove_input()">Supprimer</a></td>
						<td>&nbsp;</td>
					</tr>

le problème c'est que mon code ne marche pas

Notez toutefois que si si je vire la partie du code que j'ai mis en rouge, mon champ se supprime mais le bouton permettant de restaurer le champ en question n'apparaît pas.

Si quelqu'un peut me donner des pistes pour m'aider à avancer, je lui en serait reconnaissant.

Merci d'avance.

**SpaceFrog** · 04/12/2006, 15h32

pourquoi ne pas simplement le masquer ?

Code :

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

style.display='none'

**shnouf** · 04/12/2006, 15h55

Heu masquer quoi?

**shnouf** · 04/12/2006, 16h11

Bon en fait j'ai fais comme ça:

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
 
<script language="javascript">
	function remove_input()
 
{
var el=document.getElementById("1");//input à supprimer
 
 
el.parentNode.removeChild(el);
 
}
</script>
 
 
<script>
function restaure_champ ( nb, i ) {
 
var nb2 = nb + 1;
var i2 = i + 1;
document.getElementById('lechamps_'+i).innerHTML = '<input type="text" name="image[0]'+nb+'"></span>';
//document.getElementById('lechamps_'+i).innerHTML += '<br><span id="lechamps_'+i2+'"><a href="javascript:restaure_champ( '+nb2+', '+i2+')">Restaurer</a></span>';
 
 
}
</script>
 
	<script language="javascript">
	function restaure_input ( nb, i )
 
{
var nb2 = nb + 1;
var i2 = i + 1;
document.getElementById('lechamps_'+i).innerHTML = '<input type="text" name="image[0]'+nb+'"></span>';
document.getElementById('lechamps_'+i).innerHTML += '<br><span id="lechamps_'+i2+'"><a href="javascript:restaure_champ( '+nb2+', '+i2+')">Restaurer</a></span>';
 
 
}
</script>

Code :

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

1
2
3
4
5
6
7
8
<tr>
						<td>Image "1"</td>
						<td> : </td>
						<td><input type ='file' name='image[0]' id='1'/></td> <td><span id="lechamps_4"><a href="/" OnClick="remove_input();restaure_input()">Supprimer</a></td>
						<td>&nbsp;</td>
					</tr>
					<tr><td></td><td></td><td><span id="lechamps3_4" ><a href="javascript:restaure_champ(1, 4)">Restaurer</a></span></td>
					</tr>

Ce n'est pas encore très joli mais c'est déjà plus proche que ce que je cherche à faire le problème c'est que dans ce nouveau code le bouton "supprimer" disparaît dès que je clique sur "restaurer".

**SpaceFrog** · 04/12/2006, 16h23

plutot que de supprimer l'élément et le recréer par la suite ... masque le et rend le visible àprès ...

**shnouf** · 04/12/2006, 16h24

Bon en fait je vois d'o`vient le pb la fonction restaure_input() n'est pas affichée correctement si quelqu'un peut m'expliquer comment le peux plusieurs fonction dans un seul onclick.

**shnouf** · 04/12/2006, 16h25

Envoyé par SpaceFrog

plutot que de supprimer l'élément et le recréer par la suite ... masque le et rend le visible àprès ...

C'est justement ce que je suis en train d'essayer de faire malheureusement ma fonction restaure_input() n'est pas exécutée.

**SpaceFrog** · 04/12/2006, 16h46

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
 
<script type="text/javascript">
function remove_input(){
	var el=document.getElementById("_1");//input à supprimer
 	el.style.display='none'
	document.getElementById("lechamps_4").style.display='none';//input à supprimer
	document.getElementById("lechamps3_4").style.display='';//input à supprimer
 
 	}
 
function restaure_champ ( nb, i ) {
document.getElementById('lechamps_'+i).style.display=''
document.getElementById('_'+nb).style.display=''
document.getElementById("lechamps3_4").style.display='none' 
 
}
 
 
</script>
 
 
</head>
 
<body>
	<table height="65">
		<tr>
						<td height="25">Image "1"</td>
						<td height="25"> : </td>
						<td height="25"><input type ='file' name='image[0]' id='_1' /></td>
						<td height="25"><span id="lechamps_4" ><a href="#" OnClick="remove_input();return false;">Supprimer</a></span></td>
 
		</tr>
		<tr>
						<td height="24"></td>
						<td height="24"></td>
						<td height="24"><span id="lechamps3_4" style="display:none" ><a href="javascript:restaure_champ(1, 4);">Restaurer</a></span></td>
						<td height="24"></td>
		</tr>
 
</table>
 
</body>

**shnouf** · 04/12/2006, 17h13

Je viens de tester ton code: mon lien est caché dès le début par contre il ne me rajoute plus de champ et je bouton "supprimer se cache toujours dès le 1er clic.

**SpaceFrog** · 04/12/2006, 17h16

aors c'est que je n'ai rien compris à l'ergonomie que tu souhaites ... mais au moins tu as tous les éléments pour t'en sortir tout seul ...

**shnouf** · 04/12/2006, 17h32

le problème c'est que je ne parviens pas à lancer 2 fonctions javascript dans une seul onclick.

**SpaceFrog** · 04/12/2006, 19h11

il suffit de les mettre à la suite séparées par un ";"

Code :

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

onclick="focntion1();fonction2()"

**shnouf** · 05/12/2006, 11h00

Ben c'est ce que j'ai fais sur le code que j'ai montré non?

sinon je viens de tester en mettant OnClick="restaure_input();remove_input()" à la place de OnClick="remove_input();restaure_input()" dans ce cas là aucunne des 2 fonction ne marche, cependant j'ai également testé une à une les 2 fonction dans le onclick seule la fonction remove_input fonctionne.

Une chose important que j'ai oublié de montrer dans mon code:

la fonction restaure_input:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript">
	function restaure_input ( nb, i )
 
{
var nb2 = nb + 1;
var i2 = i + 1;
document.getElementById('lechamps_'+i).innerHTML = '<input type="text" name="image[0]'+nb+'"></span>';
document.getElementById('lechamps_'+i).innerHTML += '<br><span id="lechamps_'+i2+'"><a href="javascript:restaure_champ( '+nb2+', '+i2+')">Restaurer</a></span>';
 
 
}
</script>

**SpaceFrog** · 05/12/2006, 11h38

manque un return false dans le href ...

**shnouf** · 05/12/2006, 12h08

bon en réalité ce qui manquait c'était le 1, 4 dans le OnClick="remove_input();restaure_input(1, 4)"

j'ai réussi à avancer un peu du coup voilà où j'en suis :

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
<script language="javascript">
	function remove_input()
 
{
var el=document.getElementById("1");//input à supprimer
 
 
el.parentNode.removeChild(el);
 
}
</script>
 
 
<script>
function restaure_champ ( nb, i ) {
 
var nb2 = nb + 1;
var i2 = i + 1;
document.getElementById('lechamps3_'+i).innerHTML = '<input type="file" name="image[0]'+nb+'" id="1"></span>';
}
</script>
 
<script language="javascript">
	function restaure_input ( nb, i )
{
 
var nb2 = nb + 1;
var i2 = i + 1;
 
document.getElementById('lechamps_'+i).innerHTML += '<br><span id="lechamps3_4"><a href="javascript:restaure_champ(1, 4)">Restaurer</a></span>';
 
}
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
<tr>
						<td><h4>index.php</h4></td>
					</tr>
 
					<tr>
						<td>Image "1"</td>
						<td> : </td>
						<td><input type ='file' name='image[0]' id='1'/></td> <td><span id="lechamps_4"><a href="/" OnClick="remove_input();restaure_input(1, 4)">Supprimer</a></td>
						<td>&nbsp;</td>
					</tr>

le seul soucis qui reste maintenant c'est qu'en cliquant sur "restaurer" le reproduit indéfiniment ce bouton...

**shnouf** · 05/12/2006, 12h12

pour le ;return false; il fait tout planter si je le mes dans la partie javascript.

**shnouf** · 05/12/2006, 15h52

ou alors si je rajoute cette fonction à executer:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script language="javascript">
	function remove_inputa()
 
{
var el=document.getElementById("lechamps3_4");//input à supprimer
 
 
el.parentNode.removeChild(el);
 
}
</script>

le lien "rajouter" ne reapparaît pas sans cesse mais le fait de cliquer sur "rajouter" ne fait plus réapparraître le champ.

je ne m'en sors plus

**SpaceFrog** · 05/12/2006, 15h59

forcément si tu insistes à le détruire au lieu de le masquer ...

removeChild retire définitivement l'objet du flux !
pour le remettre il te faudrait faire un createElement appendChild ...

**shnouf** · 05/12/2006, 16h08

j'ai essayé aussi de le masquer avec

Code :

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

document.getElementById("id_du_champ").style.display = "none";

dans ce cas là ça le champ ne réapparaît plus lorsque je clique sur "restaurer"

j'essaie toutes les combinaisons possibles, j'ai ou l'un ou l'autre.

Celà dit avec ma méthode je voulait supprimer carrément le champ pour ensuite le rajouter ce qui revenait un peu au même de toute façon aucun des 2 ne fonctionne.

**SpaceFrog** · 05/12/2006, 16h11

tu as tous les éléments en main pour afficher et masque n'importe quel composant ...

pas la peine de t'embarquer dasn un removeChil et un createElement juste pour afficher et masquer ...

modifies juste le style display de l'objet en question ...

Ajout / suppression de champ

JavaScript

Discussions similaires

Partager

Partager