IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

changement de label et attributs dynamiquement


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2008
    Messages : 49
    Par défaut changement de label et attributs dynamiquement
    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 : 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
     
    <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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    voici une façon de faire, avec jQuery/JavaScript :
    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
    <!-- 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2008
    Messages : 49
    Par défaut
    Parfait.
    Sujet résolu.

    Merci beaucoup à toi et bonne journée.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [PHP-JS] PHP-javascript (BDD-attribut dynamique)
    Par Darkyl dans le forum Langage
    Réponses: 13
    Dernier message: 13/02/2009, 08h01
  2. attribution dynamique d'ID
    Par j.p.mignot dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 03/09/2008, 18h33
  3. rafraichissement jpanel apres changement de label
    Par BigBarbare dans le forum Interfaces Graphiques en Java
    Réponses: 1
    Dernier message: 28/03/2008, 16h17
  4. Réponses: 4
    Dernier message: 16/03/2008, 18h06
  5. [Struts][XHTML] écriture d'un attribut dynamique
    Par tetram51 dans le forum Struts 1
    Réponses: 4
    Dernier message: 19/04/2006, 15h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo