Ajout / suppression de champ

Version imprimable

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:

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:

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> </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.

04/12/2006, 15h32
SpaceFrog

pourquoi ne pas simplement le masquer ?

Code:

style.display='none'
04/12/2006, 15h55
shnouf

Heu masquer quoi?

Bon en fait j'ai fais comme ça:

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
 
<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:

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". :(

04/12/2006, 16h23
SpaceFrog

plutot que de supprimer l'élément et le recréer par la suite ... masque le et rend le visible àprès ...
04/12/2006, 16h24
shnouf

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.
04/12/2006, 16h25
shnouf

Citation:

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.

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
 
<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>

04/12/2006, 17h13
shnouf

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.
04/12/2006, 17h16
SpaceFrog

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 ...
04/12/2006, 17h32
shnouf

le problème c'est que je ne parviens pas à lancer 2 fonctions javascript dans une seul onclick.
04/12/2006, 19h11
SpaceFrog

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

Code:

onclick="focntion1();fonction2()"

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:

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>

05/12/2006, 11h38
SpaceFrog

manque un return false dans le href ...

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:

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:

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...

05/12/2006, 12h12
shnouf

pour le ;return false; il fait tout planter si je le mes dans la partie javascript.
05/12/2006, 15h52
shnouf
ou alors si je rajoute cette fonction à executer:
Code:

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 :help:
05/12/2006, 15h59
SpaceFrog

forcément si tu insistes à le détruire au lieu de le masquer ... :mouarf:
removeChild retire définitivement l'objet du flux !
pour le remettre il te faudrait faire un createElement appendChild ...
05/12/2006, 16h08
shnouf

j'ai essayé aussi de le masquer avec

Code:

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.
05/12/2006, 16h11
SpaceFrog

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 ...
05/12/2006, 16h50
shnouf

oui effectivement j'ai beaucoup moins de m.... en cachant simplement les champs seulement j'ai peur que par la suite ça m'écrase les données précédemment enregistrée sur mon formulaire par des champs vides (c'est un formulaire de mise à jour)

Je ne mes pas de suite sur résolu, j'ai un peu peur d'avoir de gros soucis par la suite...
05/12/2006, 17h29
SpaceFrog

mets les champs cachés en disabled en plus ...