Supprimer un champ ?

**Ryuuku** · 23/06/2009, 10h54

Bonjour,
Actuellement je recherche un script Javascript simple pour ajouter/supprimer un champ "input".
Je suis tombé sur un petit script et l'ai un peu réadapté pour commencer avec un seul champ input (et non 3) et j'ai ajouté une suppression :

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
<html>
<head>
<title>Document sans nom</title>
<script>
function create_champ(i) {
 
var i2 = i + 1;
 
document.getElementById('champ_'+i).innerHTML = '<input type="file" name="fichier_'+i+'"><a href="javascript:supr_champ('+i+')">Suprimer un champ</a></span>';
<!-- limité à 10 champs envoyé en même temps -->
document.getElementById('champ_'+i).innerHTML += (i <= 9) ? '<br /><span id="champ_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champ</a><br />' : '';
}
function supr_champ(i)
{
  var Parent;
  var Obj = document.getElementById ( 'champ_'+i) ;
  if( Obj)      
    Parent = Obj.parentNode;      
    if( Parent)
      Parent.removeChild( Obj);
 
}
</script>
</head>
<body>
<form enctype="multipart/form-data" action="index.php?page=image" method="POST">
	<input type="file" name="fichier_1" /><br />
	<span id="champ_2"><a href="javascript:create_champ(2)">Ajouter un champs</a><br />
	</span>
</form>
 
</body>
</html>

Si vous testez ce code vous verrez un problème, en supprimant je supprime tout, y compris mon ajout...

J'ai alors cherché un peu, et je m'en suis inspiré pour pondre ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function supr_champ(i)
{
  var Parent;
  var Obj = document.getElementById ( 'champ_'+i) ;
 
 if( Obj)     
    Parent = Obj.parentNode;     
    if( Parent)
     Obj.removeChild(Obj.childNodes[0]);
 
}

Là j'ai carrément deux problèmes :
1- il faut appuyer deux fois pour que le champ puis le lien soit supprimé

;
2- le nom de champ "disponible" ne diminue pas. En clair j'ai limité le nombre de champ total à dix, hors quand je clic sur ajouter, il ne prend pas en compte le fait que j'ai supprimer un ou plusieurs champs. Néanmoins pour ce dernier problème je pense qu'il y a une solution facile à laquelle je vais déjà m'atteler. Surement une solution en "réécrivant" mon lien d'une manière ou d'une autre.

**E.Bzz** · 23/06/2009, 11h09

Bonjour,
la 2° méthode (removeChild() ) est la bonne

Ton problème ne viendrait pas de ce </span> qui n'a rien à faire là ?

Code :

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

document.getElementById('champ_'+i).innerHTML = '<input type="file" name="fichier_'+i+'"><a href="javascript:supr_champ('+i+')">Suprimer un champ</a></span>';

A+

**E.Bzz** · 23/06/2009, 11h11

Par ailleurs, pour ajouter le champ, il vaudrait largement mieux utiliser aussi une syntaxe DOM

A+

**SpaceFrog** · 23/06/2009, 11h11

pour le supprimer il suffit de le basculer en display:none

pour en ajouter si il n'existe pas déja sur la page ce n'est pas "simple"
je te conseille d'aller faire un tour dans les contributions:
http://www.developpez.net/forums/d53...ynamique-form/

**Ryuuku** · 23/06/2009, 11h20

Envoyé par SpaceFrog

pour le supprimer il suffit de le basculer en display:none

pour en ajouter si il n'existe pas déja sur la page ce n'est pas "simple"
je te conseille d'aller faire un tour dans les contributions:
http://www.developpez.net/forums/d53...ynamique-form/

Oui en cherchant un peu sur le forum je suis tombé sur ton travail.
Vais d'abord voir avec les réponses précédentes et ensuite lire ton travail. Il est vrai que pour mon site "actuel" j'ai surement pas besoin d'un truc si "complexe", mais bon si ça répond à d'éventuel "amélioration" à venir pourquoi pas.

**Nick_Rivers** · 23/06/2009, 14h39

Je vais profiter également du sujet

je suis dans le même cas, réaliser des champs dynamiques avec la possibilité de supprimer un champ généré

En ce qui concerne la suppression les scripts testés supprime le dernier champ généré.

J'aimerai donc comme la fait Ryuuku qu'il y est la possibilité de supprimer chaque champ généré

j'ai trouvé un exemple sur la toile, à cette adresse

http://www.etudium.com/tmp/formulaire/index.htm

J'ai également parcouru la solution proposée SpaceFrog mais qui me semble aussi un peu complexe pour ce que je veux réaliser.

il faudrait donc utiliser display='inline' dans la fonction ajouter et display:none dans la fonction supprimer ?

Merci

Edit :

En modifiant la fonction et en ajoutant un id je supprime bien le champ généré voulu

Code :

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

1
2
3
4
5
 
	function supr_champ(i){
	var parent = document.getElementById("champs_"+i).parentNode;
	parent.removeChild(document.getElementById("champs_"+i));
	}

Code :

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

<div id="champs_'+i+'">

**Ryuuku** · 24/06/2009, 10h08

J'ai jeté un oeil au travail de SpaceFrog, et pfiou je pige pas tout parfaitement encore.

Je pense que je vais plutôt adapter le code de Nick_Rivers dans un premier temps. Je vais essayer de mettre un compteur et faire en sorte qu'il n'y est qu'un bouton supprimer pour supprimer le dernier champ.
Cela dans le but d'éviter de me retrouver avec un champ numéro 5 puis un autre juste après numéro 8 (faut penser à la récupération des données derrières quand même).

Parce concrètement j'arrive pas à comprendre comment je pourrais obtenir ce que je veux avec le code de SpaceFrog pour l'instant. Bien que visiblement il répondrait parfaitement à ce que je souhaite (comptage des noeuds via un tableau).

Bref moi humble petit "zéro

" c'est limite s'il me faudrait pas une tuto pour utilise ce code

EDIT : Un petite creusement de tête et voici le résultat que je soumet à "correction"

:

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
<html>
<head>
<title>Document sans nom</title>
<script>
<!--
var i = 0;
function champ(t){
	if(t==1){
		if(i<1){
		document.getElementById('champs').innerHTML += "<div id='champs_"+i+"'>Jour :<input type='text'size='8' readonly name='jour_"+i+"' id='jour_"+i+"' class='vertical' /><input type='image' src='images/cal.jpg' name='bouton' alt='cliquer' class='verticalEspace' onClick=displayCalendar(document.getElementById('jour_"+i+"'),'dd/mm/yyyy',this); />Heures :<input name='heures_"+i+"' size='2' type='text' class='vertical' /></div>";
		}
		else{
			document.getElementById('champs').innerHTML += "<div id='champs_"+i+"'>Jour :<input type='text'size='8' readonly name='jour_"+i+"' id='jour_"+i+"' class='vertical' /><input type='image' src='images/cal.jpg' name='bouton' alt='cliquer' class='verticalEspace' onClick=displayCalendar(document.getElementById('jour_"+i+"'),'dd/mm/yyyy',this); />Heures :<input name='heures_"+i+"' size='2' type='text' class='vertical' /></div>";
		}
		i++;
	}
	else{
		var j=(i-1);
		var parent = document.getElementById("champs_"+j).parentNode;
		parent.removeChild(document.getElementById("champs_"+j));
		i--;
	}
}
-->
</script>
</head>
<body onLoad="champ(1);">
<form name="dates" method="post" action="#" onSubmit="return false;">
	<div id="champs">
		<!-- on va créer les champs ici -->
	</div>
	<input onClick="javascript:champ(1);" value="Ajouter un champ" type="button">
	<input onClick="javascript:champ(2);" value="Supprimer le dernier champ" type="button">
</form>
</body>
</html>

Je me suis basé sur le lien donné par Niko : http://www.etudium.com/tmp/formulaire/index.htm, dont j'ai récupéré le javascript (assez facile).

Voilà avec ce code je pense obtenir ce que je veux :
- On peut ajouter des champs à volonté
- On peut supprimer uniquement le dernier champ et on modifie le "compteur" (la variable i)

Le tout dans une seule fonction. Voilà j'espère que mon humble petite idée est bonne, en tout cas ça semble fonctionner.

**Ryuuku** · 25/06/2009, 10h20

Pardonnez ma question sans doute idiote, mais il ya-t-il un moyen de connaître le nombre de champ envoyé ? C'est pour le traitement via Php après l'envoi du formulaire

Raaa zut je viens de me rendre compte qu'en plus ça me vide les éléments précédents

Supprimer un champ ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager