changement de label et attributs dynamiquement

Version imprimable

Bonjour à tou(te)s,

Je suis en train d'essayer de réaliser un système permettant de mettre à jour une page (interface admin).
Je ne suis qu'à la conception d'un html propre via javascript.

Je rencontre un problème et je me casse les dents dessus depuis pas mal de temps sans trouver de solutions.

J'aimerais pouvoir ajouter et supprimer des champs (input) par pression sur boutons.

Tout marche comme je le souhaite mais sachant que j'attribue un nombre à chaque champs, lorsque j'en supprime un autre que le dernier, les nombres ne se suivent plus... (nombre utilisé pour les attributs : for, id, name ainsi que pour le label du champ)

Comment pourrais-je faire pour que tout les nombres des champs après celui supprimé se décrementent de 1 ?

Voici 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 24 25 26 27 28 29 30 31 32 33 <script type="text/javascript"> var nbr_carac=1; //var caract_tab = new Array(); function fAddCarac() { if(nbr_carac<20){ nbr_carac+=1; var contenu = document.getElementById('cible').innerHTML; var contenu_Add = '<li><label for="carac_'+nbr_carac+'">Caractéristique '+nbr_carac+' </label><input type="text" id="carac_'+nbr_carac+'" name="carac_'+nbr_carac+'"/><input type="button" value="Suppression" onclick="del_Carac(this)" /></li>'; //caract_tab.push(contenu_Add); contenu = contenu+contenu_Add; document.getElementById('cible').innerHTML = contenu; } if(nbr_carac==20){ document.getElementById('add_carac').style.display="none"; } } function del_Carac(id){ nbr_carac-=1; var parent=id.parentNode; parent.parentNode.removeChild(parent); } </script>
Code:

1 2 3 4 5 6 7 8 9 10 <ul> <li>Les caractéristiques <ul id="cible"> <li><label for="carac_1">Caractéristique 1</label> <input type="text" id="carac_1" name="carac_1"/></li> </ul> <input id="add_carac" type="button" value="Ajout caractéristique" onclick="fAddCarac()" /> </li> </ul>
Merci pour votre aide.

Bonjour,
voici une façon de faire, avec jQuery/JavaScript :

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
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
        var nbr_carac = 1; /* initialisation */
        var nbr_carac_max = 5; /* nombre maxi */
        $(document).ready(function(){
                /* ajout d'une caractéristique */
                $('#add_carac').click(function(){
                        nbr_carac += 1;
                        if(nbr_carac<=nbr_carac_max){
                                var contenu_Add = '';
                                contenu_Add += '<li><label for="carac_'+nbr_carac+'">Caractéristique '+nbr_carac+' </label>';
                                contenu_Add += '<input type="text" id="carac_'+nbr_carac+'" name="carac_'+nbr_carac+'"/>';
                                contenu_Add += '<input type="button" value="Suppression" onclick="del_Carac(this);"/></li>';
                                   $('#cible').append(contenu_Add);
                        }
                        if(nbr_carac>=nbr_carac_max){
                                   $('#add_carac').css('display','none');
                        }
                });
        });
        /* suppression d'une caractéristique */
        function del_Carac(id){
                nbr_carac -= 1;
                /* suppression du li concerné */
                var parent = id.parentNode;
                parent.parentNode.removeChild(parent);
                /* renumerotation des li */
                var num_li = 1;
                $('#cible').find('li').each(function(){
                        $(this).find('label').attr('for','carac_'+num_li).html('Caractéristique '+num_li);
                        $(this).find('input:first').attr('id','carac_'+num_li).attr('name','carac_'+num_li);
                        num_li++;
                });
                if(nbr_carac<nbr_carac_max){
                        $('#add_carac').css('display','block');
                }
        }
</script>

Code:

1
2
3
4
5
6
7
8
<ul>
	<li>Les caractéristiques
	<ul id="cible">
		<li><label for="carac_1">Caractéristique 1</label><input type="text" id="carac_1" name="carac_1"/></li>
	</ul>
	<input id="add_carac" type="button" value="Ajout caractéristique" />
	</li>
</ul>

12/02/2012, 14h21
doncho23

Parfait.
Sujet résolu. :)

Merci beaucoup à toi et bonne journée.