ajouter et supprimer un champ de formulaire
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:
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:
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> |
