Discussion :

[sativa808]

Bonjour à tous,
après des heures de recherche sur le web, j'ai glané ici et là quelques fragments de code me permettant d'élaborer ces deux fonctions (ajouter ,supprimer).
Mais, car il y a toujours un "mais", la fonction supprimer() est un peu trop puissante , et si on supprime le noeud de référence, il est impossible de le recréer par la fonction ajouter().

J'aimerai pouvoir "protéger" ce noeud de référence, si c'est possible...

Le contexte est un formulaire permettant d'obtenir un champ supplementaire .
Bien heureux que javascript le permette, mais je le découvre seulement.

merci à ceux ou celles qui pourraient jeter un oeil là dessus, j'aurait bien aimé trouver mais là je m en remets à vous!

bye bye. Nico.

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
<script type="text/javascript">
 function ajouter()
 {  
 /*on recupére l'element à cloner par son ID*/
var obj = document.getElementById('field');
/*clonage*/
var field = obj.cloneNode(true);
 
obj.style.display='';	/*ça c est pour annuler le display:none dans le code html*/
/*pour que les champs soient vide par la suite*/
inputs = field.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
/*copie au bon endroit*/
document.getElementById('form1').appendChild(field); 
}      
 
 function supprimer() {
 var field = document.getElementById('field');
 document.getElementById('form1').removeChild(field); 
 }</script>

et le html au cas où:

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
<form id="form1"  method="post" action="index.php">
     <fieldset id="field" style="display:none"> /*disply:none pour
        <legend>article à deposer</legend>
    <p><label>désignation
    <input type="text" name="designation[]" />
    </label> </p>
  <p><label>taille
    <select id="taille" name="taille[]">
      <option>S</option>
      <option>M</option>
      <option>L</option>
    </select>
    </label></p>
	</fieldset>  
</form>
 
  <input name="button" type="button" onclick="ajouter();" value="Ajouter un autre article" /> 
  <input name="button" type="button" onclick="supprimer();" value="suppr" /> 
    <label>  OU
    <input type="submit" name="Submit" value="Valider" />
    </label>

[SpaceFrog]

as tu été jeter un oeil dans les contributions ... FORM Dynamique...

SInon pourquoi supprimer si c'est pour rajouter après ...
un simple display:none ne suffirait il pas ?

[sativa808]

merci d'avoir répondu,

en effet, le fait de supprimer tient plus de l'ergonomie de l'interface ( au cas ou la personne se rend compte qu elle n' a pas besoin du champ qu' elle vient d'ajouter).
le display:none se placerais sur quoi exactement, car j ai dejà tenté dans le code html ?
je vai faire une recherche ds les contrib.
@+

[SpaceFrog]

le display est une propriété du style de l'objet ...

Code :

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

<input style='display:none' ... />

modifiable dynamiquement

[sativa808]

en effet,
j utilise la proprièté display sur la balise <fieldset> qui devient l'objet cloné.

mais ca n'empeche pas la fonction supprimer() de le supprimer quand même.

et donc c'est dans ce cas qu il est impossible de le recréer.
tu l'utiliserais de quelle manière?

[SpaceFrog]

ben ne le supprime pas ...

[sativa808]

c'est encore moi, j'ai parcouru le forum a la rcherche de ce fameux post sur "Form Dynamique" euh, j ai pas trouver

c'est vrai que de ne pas supprimer le dernier noeud est une solution, mais un accident de clic est si vite arrivé .

Sinon j'ai vu exactement ce qu il faudrait, mais ce code une fois recopié ne fonctionne pas du tout.

Si quelqu' un est interressé pour le tester , ça se passe ici : http://www.quirksmode.org/dom/domform.html

[SpaceFrog]

http://www.developpez.net/forums/sho...d.php?t=535848