[DOM] Supprimer des champs text

**Mo_Poly** · 10/03/2008, 20h24

Salut,

Messieurs les experts en Javascript! J'ai besoin de votre créativité, non seulement je suis trés débutant en javascript, mais de plus ma créativité est trés limité dans ce domaine. voici la problèmatique:

Dans une de mes pages, j'ai un bouton nommé "Ajouter un logiciel" qui à chaque fois qu'on clique dessus, un champs text (input) s'ajouter dans lequelle on peux rentrer le nom d'un logicie. vu que le nombre de ces logiciels n'est pas connu en avance, alors à chaque fois qu'on cliquera sur ce bouton, un champs s'ajouter et cela infiniment.

Dans une autre page, j'ai formulaire de modification, qui est initialisé par les valeurs stocké dans ma base de données (fichier XML) donc si par exemple dans ma base de données se trouvent dans un noeud 2 logiciels appelés respectivement "1" et "2", dans le formulaire de moficiation, on trouvera le bouton "ajouter un logiciel" qui est encore là au cas ou la personne veux encore ajouter des logiciels, avec au dessous de ce boutton, deux champs text, le premier qui contient "1" et le deuxième qui contient "2"

le script qui effectue ces operations est le suivant :

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
<script type="text/javascript">
 
	var ide=0;
 
	function newid(idd)
 
	{
 
		ide=idd;
 
	}
 
	function ajouteInput()
 
	{
 
		var parent = document.getElementById("log");//conteneur
 
 
 
		var input = document.createElement("input");//le input
 
		var br = document.createElement("br");//un retour à la ligne
 
 
 
		input.type= "text";//type de l'input
 
		input.id="logiciel"+ide;
 
		input.name = "logg"+ide;
 
		parent.appendChild(input);
 
		parent.appendChild(br);
 
		ide++;
 
	}
 
</script>

Je veux ajouter la fonctionnalité, de pouvoir supprimer un des champs qui s'affichent dans le formulaire de modification, pour l'exemple évoquée précédemment, si par exemple je veux supprimer le logiciel portant le nom "2", et donc je veux supprimer le champs text contenant cette valeur "2" . Je ne trouve vraiment de solutions (vous voyez ma créativité limitée

)

Donc veuillez svp m'aider à résoudre ce probème !

Merci

...

**KawaJVC** · 10/03/2008, 21h19

Salut ,

Je pense pas que ce soit si dur

En fait faudrait que tu fasses une balise avec un ID et dedans un champ text

Code :

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

1
2
3
 
var id = 0
document.write("<div id='idtext"+id+" '><input type='text'></div>");

Ensuite après tu peux toujours faire une fonction pour effacer

Code :

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

1
2
3
4
5
 
function effacerchamp(id)
{
document.getElementById("idtext" + id).innerHTML='';
}

Donc après tu peux adapter un bouton effacer lors de l'ajout du champ

Code :

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

1
2
3
 
var id = 0
document.write("<a href='javascript:;' onclick='effacerchamp("+id");'>del</a> <div id='idtext"+id+" '><input type='text'></div>");

En espèrant que ces bouts de codes pourront t'être utiles.

**Mo_Poly** · 10/03/2008, 22h26

Merci pour ta réponse!

Mais j'ai des questions, ce bout de code :

Code :

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

document.write("<a href='javascript:;' onclick='effacerchamp("+id");'>del</a> <div id='idtext"+id+" '><input type='text'></div>");

je le mets ou ? (sachant que mon code est écrit en php, dans lequel je fais appel à des script javascript)

De plus la fonction supprimer, comment elle va savoir c'est lequel des champs que je veux supprimer,je sais avec l'id, mais comment avec un simple boutton je vais passer à cette fonction la valeur de l'id du champs à supprimer ?

Merci

...

**Mo_Poly** · 12/03/2008, 16h55

bon voici ce que je vais essayer de faire:

A coté de chaque input text, il y aura un checkbox, et tous les checkbox cochés seront supprimés avec les champs text qui viennent avec encliquant sur le boutton supprimer qui fait appel au script de suppression.

le problème, c'est ce que j'ai fait le code pour ajouter le checkbox, mais ca ne s'ajoute pas et j'ignore la raison!

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
24
25
26
27
28
29
30
31
32
	function ajouteInput()
 
	{
 
		var parent = document.getElementById("log");//conteneur
 
 
 
		var input = document.createElement("input");//le input
		var checkb = document.createElement("input");//on ajoute un checkbox pour la suppression
 
		var br = document.createElement("br");//un retour à la ligne
 
 
		checkb.type="checkbox";
 
		input.type= "text";//type de l'input
 
		input.id="logiciel"+ide;
		checkb.id="logiciel"+ide;
 
		input.name = "logg"+ide;
		checkb.name= "check"+ide;
 
		parent.appendChild(input);
		parent.appendChild(checkb);
 
		parent.appendChild(br);
 
		ide++;
 
	}

Il n'y a que le champs text qui s'affiche :s

Aidez moi svp!

...

**marts** · 12/03/2008, 19h43

Envoyé par Mo_Poly

Code :

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

1
2
3
 
		input.id="logiciel"+ide;
		checkb.id="logiciel"+ide;

utilises 2 id différents.

**Auteur** · 12/03/2008, 21h37

ton code fonctionne très bien :

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var ide=0;
function ajouteInput()
 
        {
 
                var parent = document.getElementById("log");//conteneur
 
                
 
                var input = document.createElement("input");//le input
                var checkb = document.createElement("input");//on ajoute un checkbox pour la suppression
 
                var br = document.createElement("br");//un retour à la ligne
 
                
                checkb.type="checkbox";
 
                input.type= "text";//type de l'input
 
                input.id = "InpLog"+ide;
                checkb.id = "ChkLog"+ide;
 
                input.name = "logg"+ide;
                checkb.name= "check"+ide;
 
                parent.appendChild(input);
                parent.appendChild(checkb);
 
                parent.appendChild(br);
 
                ide++;
 
        }
 
//-->
</script>
 
</head>
 
<body onload="ajouteInput()">
 
<div id="log">
</div>
 
<input type="button" onclick="ajouteInput()" id="idButton" value="Ajouter..."/>
 
 
</body>
 
</html>

en passant : évite document.write() on a souvent de mauvaises surprises avec

**Mo_Poly** · 12/03/2008, 22h32

Envoyé par marts

utilises 2 id différents.

ça na rien changé

Auteur, qu'est ce que je peux utiliser à la place ?

...

**Auteur** · 12/03/2008, 23h17

createElement() et appendChild() comme tu l'as bien fait dans ton script ci-dessus

**Mo_Poly** · 13/03/2008, 00h05

Envoyé par Auteur

createElement() et appendChild() comme tu l'as bien fait dans ton script ci-dessus

LOL, ca n'a pas marché :s , le checkbox que j'ajoute ne s'affiche pas ! je ne trouve pas mon erreur vu que c'est le meme code que j'ai fait pour ajouter un input text et ça marche!

...

**marts** · 13/03/2008, 01h23

Ce n'est pas normal, ça devrait marcher.
A tout hasard je l'ai testé sur firefox, internet explorer et opera : pas de problème, ça fonctionne.
Donc ???

**Auteur** · 13/03/2008, 10h07

De mon côté aussi aucun problème.... Le bout code ci-dessus fonctionne très bien.

Mo_Poly : Tu n'as pas une feuille de style qui est intégrée dans ta page ?

Quel navigateur utilises-tu ?

**Mo_Poly** · 13/03/2008, 17h19

Oups! Ça marchait effectivement, j'avais juste oublié de sauvegarder

(croyez moi la fatigue va me tuer ces jours)

Bon derniere question, et aprés je vous laisse tranquils promis

voici ma fonction de suppression de champs:

Code :

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

1
2
3
4
	function effacerchamp(id)
	{
	document.getElementById("logg" + ide).innerHTML='';
	}

Il faudra changer cette fonction, en fait ce que je souhaite faire c'est une sippressoin multiple de champs, je vous montre un screen shot (je reglerai l'aspect graphique de ma page à la fin ) :

Je ne vois pas comment pourrais-je envoyer par le bouton, les id des champs et checkboxs a supprimer !

voici mon code php :

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
<TD  id=\"log\">
 
								<input type=\"button\" onclick=\"ajouteInput()\" value=\"ajouter un logiciel\" /> <input type=\"button\" onclick=\"effacerchamp()\" value=\"supprimer un logiciel\" />  <br />";
 
 
								for($i=0;$i<$leslogs->length;$i++)
 
								{
 
									$str='logg'.$i;
									$str2='check'.$i;					
 
									$logiciel = stripslashes($leslogs->item($i)->nodeValue);
 
									echo" <input type=\"text\" name=\"$str\" value=$logiciel /> <input type=\"checkbox\" name=\"$str2\" value=$i /><br/>";
 
								}
 
							echo"
 
							</TD>

Je ne trouve vraiment pas de solutions

Merci de m'aider

...

**Auteur** · 13/03/2008, 19h50

J'ai un comportement bizarre avec removeChild()

Les éléments sont bien supprimés mais l'espace qui leur était alloué reste

J'ai retrouvé un problème similaire qui pourrait te satisfaire faute de mieux :
http://www.developpez.net/forums/sho...d.php?t=334611

Il faudra adapter le code à tes besoins.

**Mo_Poly** · 13/03/2008, 21h10

J'ai vu le script, j'ai pas compris grand chose, ce que je veux comprendre, c'est comment passer 3 ou 4 id à la fonction suppression pour que cette derniere les supprime ?

...

**Auteur** · 13/03/2008, 22h16

En fait, il a inclus ses input dans une table. Le bouton supprimer s'applique sur une ligne à la fois.

Le problème de ce que souhaite faire est qu'à chaque suppresion d'un élément il faut parcourir à nouveau l'arbre DOM avant de supprimer un autre élément. En effet lorsque tu supprimes un élément, sa place dans l'arbre DOM a changé et il faut tenir compte de sa nouvelle position avant de le supprimer (pour éviter de supprimer un élément que tu souhaites conserver).

En fait c'est une méthode différente que je te propose : placer un bouton "supprimer" pour chaque ligne.

**Mo_Poly** · 13/03/2008, 23h21

Envoyé par Auteur

En fait c'est une méthode différente que je te propose : placer un bouton "supprimer" pour chaque ligne.

J'aime bien l'idée, j'ai essayé de la faire (sans succés bien evidemment

)

ce que j'ai fait, c'est que j'ai rajouté cette photo

a coté de chaque champs text, dans la balise de cette image je fais appel a la function effacerchamp avec l'attribut onclick : (c'est du php)

Code :

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

echo" <input type=\"text\" name=\"$str\" id=\"$i\" value=$logiciel /> <img src=\"http://132.207.28.122/magnu/Admin/images/supprimer.gif\" onclick=\"effacerchamp($i)\" id=\"$i\" /><br/>";

Donc le problème est premierement avec le bouton ajouter logiciel, il n'ajoute plus rien, voici la fonction qui est supposé ajouter un champs text avec l'image aprés chaque clique :

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
	var ide=0;

	function newid(idd)

	{

		ide=idd;

	}


	function ajouteInput()

	{

		var parent = document.getElementById("log");//conteneur

		

		var input = document.createElement("input");//le input
		var imag = document.createElement("img");//on ajoute un checkbox pour la suppression

		var br = document.createElement("br");//un retour à la ligne

		
		imag.src="http://132.207.28.122/magnu/Admin/images/supprimer.gif";

		input.type= "text";//type de l'input

		input.id="logiciel"+ide;
		imag.onclick="effacerchamp("+ide+")";
		imag.id=ide;

		input.name = "logg"+ide;
		checkb.name= "check"+ide;

		parent.appendChild(input);
		parent.appendChild(imag);

		parent.appendChild(br);

		ide++;

	}

le 2eme problème, la fonction qui efface le champs, elle ne fait rien non plus

:

Code :

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

1
2
3
4
5
6
	function effacerchamp(id)
	{
	document.getElementById("logg" + id).innerHTML='';
	}
 
</script>

AAAAH je suis tellement débutant avec ce langage, et sincerment j'approuve trop de difficultés avec ! (contrairement aux autres langages...)

Merci de m'aider

...

**marts** · 14/03/2008, 08h38

Envoyé par Mo_Poly

comment passer 3 ou 4 id à la fonction suppression pour que cette derniere les supprime ?
...

Tu n'as pas besoin de lui passer les id à cette fonction, elle peut aller les chercher elle même en regardant les checkbox qui sont cochés.

**Mo_Poly** · 14/03/2008, 19h56

Bein la j'ai laissé tomber cette piste et je suis deja partie sur une autre.

Il me reste juste deux petits problèmes à regler!

1: dans l'image que j'ajoute, j'ai mis un onclick :

Code :

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

<img src=\"http://132.207.28.122/magnu/Admin/images/supprimer.gif\" onclick=\"effacerchamp($i)\" id=\"$str2\" />

et ma fonction ajouter, elle dois ajouter cette image avec l'attribut onlick, mais ca ne marche pas :

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
function ajouteInput()

	{

		var parent = document.getElementById("log");//conteneur

		

		var input = document.createElement("input");//le input
		var imag = document.createElement("img");//on ajoute un checkbox pour la suppression

		var br = document.createElement("br");//un retour à la ligne

		
		imag.src="http://132.207.28.122/magnu/Admin/images/supprimer.gif";

		input.type= "text";//type de l'input

		input.id="logiciel"+ide;
		imag.onclick="effacerchamp(ide)";
		imag.id=ide;

		input.name = "logg"+ide;

		parent.appendChild(input);
		parent.appendChild(imag);

		parent.appendChild(br);

		ide++;

	}

L'appel pour effacer champs ne se fait pas, c'est surement pas comment ca qu'il fallait faire, mais je n'ai rien trouvé qui puisse m'aider!

2éme problème :
Voici ma fonction effacer :

Code :

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

1
2
3
4
5
function effacerchamp(id)
	{
		document.getElementById(id).style.display='none';
		document.getElementById("img"+id).style.display='none';
	}

Elle marche bien elle supprime les champs, enfin les champs restent mais il ne sont plus visibles c'est tout, donc le code php qui recupere les données du formulaire, il recupere les valeurs contenues dans ces champs que j'enleve, donc ma question est : y a t-il une autre fonction (a place de style.display) qui sert a supprimer completement le champs du formulaire et non seulement desactiver son affichage!

MErciiiii

...

**marts** · 14/03/2008, 23h22

Code :

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

document.getElementById(id).parentNode.removeChild(document.getElementById(id));

**Auteur** · 15/03/2008, 11h18

L'appel pour effacer champs ne se fait pas, c'est surement pas comment ca qu'il fallait faire

comme ceci :

Code javascript :

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

1
2
 
imag.onclick=function(){effacerchamp(ide)};

[DOM] Supprimer des champs text

JavaScript

Discussions similaires

Partager

Partager