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 :

Modifier le "name" d'une balise après clonage


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut Modifier le "name" d'une balise après clonage
    Bonjour à tous,

    Je souhaiterai avoir votre aide concernant ne nommage d'une balise qui après avoir été cloné. celle-ci hérite du même nom.
    ce qui me pose problème dans mon formulaire car les balises select doivent avoir un nom différents pour pouvoir être enregistré.

    Voici un extrait de mon code html qui est cloné

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="med" name="med" style="paddinh-top 10px">
        <select name="selectmed">
            <option>1</option>
            <option>1</option>
            <option>1</option>
        </select>
        </div>

    et voici le code javascript:

    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
    var i = 0;
     
    function duplic()
    {
       var clone = document.getElementById("med");
       cloneNode = clone.cloneNode(true);
     
     
       clone.id = clone.id+i;
       clone.name = clone.name+i;
     
       i++;
     
       clone.appendChild(cloneNode);
     
     
       var select = document.getElementById("selectmed");
       select.name = select.name+i;
     
    }
    Merci d'avance de votre aide.
    Cordialement.
    Sébastien.

  2. #2
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 859
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 859
    Points : 3 680
    Points
    3 680
    Par défaut
    Bonjour,

    Je ne comprends pas ta technique: tu mélanges les clones et les originaux, et tu redéfinis des propriétés des originaux en croyant déclarer celles des clones... Les lignes 10, 11 et 19 ne correspondent pas à ce que tu veux vraiment faire, à mon avis.

  3. #3
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    7 189
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 7 189
    Points : 11 296
    Points
    11 296
    Par défaut
    pour ce genre de manipulations avancées du code HTML, j'utilise la bibliothèque libre jQuery, qui permet de simplifier beaucoup de chose :
    https://api.jquery.com/clone/

  4. #4
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut
    Bonsoir Mathieu, bonsoir javatwister,

    javatwister,
    pour t'expliquer ce que je souhaite réaliser, je souhaite cloner un élément (div contenant un select) et que ce nouveau élément prenne un name différent que celui d'origine.
    Il est fort probable que dans mon code je sois a côté de la plaque, si tu peux prendre un peu de temps et m'expliquer comment réaliser ces actions.

    Mathieu,
    Je souhaite si possible rester à une simple fonction (déjà que là je suis pommé).

    Merci de votre aide.
    Sébastien

  5. #5
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 859
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 859
    Points : 3 680
    Points
    3 680
    Par défaut
    concrètement, si tu veux cloner ta liste déroulante et l'insérer dans la même div, ça donne ça:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var clone = document.getElementById("med").getElementsByTagName("select")[0].cloneNode(true);  
    clone.name="bidule";
    document.getElementById("med").appendChild(clone);
    Après, si tu as un système d'ajout automatique illimité ou que sais-je, tu peux rationaliser le nommage avec ta variable i; mais le principe est là;

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut
    javatwister,

    ton code fonctionne mais je souhaiterai une div différentes pour chaque select (désole, je suis embatant).
    Peux-tu me dire comment faire ?

    Merci d'avance.
    Cordialement.
    Sébastien

  7. #7
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 859
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 859
    Points : 3 680
    Points
    3 680
    Par défaut
    imaginons ton formulaire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form id="f">
    <div id="med" style="padding-top 10px;margin-top:20px;">
        <select name="selectmed">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </div>
    <button id="add">Ajouter une liste</button>
    </form>
    Attention, j'ai supprimé le name de ton div qui n'a aucune raison d'être.

    Tu ajoutes tes listes comme ça:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    document.getElementById("add").addEventListener("click", (e)=> {
    	let clone=document.getElementById("med").cloneNode(true); 
    	const nbr=document.getElementById("f").getElementsByTagName("select").length;
    	clone.id="med"+nbr;
    	clone.getElementsByTagName("select")[0].name="selectmed"+nbr;
    	document.getElementById("f").insertBefore(clone,e.target);
            e.preventDefault();// ne pas envoyer le formulaire...
    },false)

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 634
    Points
    33 634
    Par défaut
    Bonjour,
    Citation Envoyé par Sebastien31t
    (...) mais je souhaiterai une div différentes pour chaque select
    d'après ton code cet élément ne te sert qu'à faire de la mise en page autour de ton <select>, elle est donc parfaitement inutile

    Il est tout à fait possible, dans la mesure où tu vas transmettre les données au serveur, d'utiliser un name sous forme de tableau, name="selectmed[]" et là plus besoin de te creuser la tête et tu récupères, côté serveur, les données dans une boucle par exemple.

  9. #9
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut
    Bonjour,

    javatwister,
    Je me suis inspiré de du code donné hier et je viens de trouver une solution pour cloner la div.

    NoSmoking,
    Je souhaite une div pour y mettre plusieurs éléments, pour le moment deux select...

    Voici le code html

    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
        <div name="parent" id="parent">
            <div id="med" name="med" class="med">
            <select name="select0">
                <option value="" selected ></option>
                <?php
                    $sqlmed = "select 
                    id_medicament as idmed,
                    medicament_name as nom 
                    from medicament
                    order by medicament_name asc";
     
                    $requetemed = mysqli_query($conn, $sqlmed);
                    while ($donnemed = mysqli_fetch_assoc($requetemed)){?>
                        <option value="<?php echo $donnemed['idmed'] ?>"><?php echo $donnemed['nom'] ?></option>
                    <?php } ?>
                ?>
            </select>
            <select name="selectqte0">
                <option value="" selected ></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
            </div>
        </div>


    et ici le code qui fonctionne pour cloner la div et pour renommer le "select0", par contre je n'arrive pas a modifier le nom de mon deuxième select "selectqte0", pourtant le procédé est le même.

    Voici le code js

    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
    var i = 0;
     
    function duplic()
     
    {
       var clonediv = document.getElementById("med").cloneNode(true);
       document.getElementById("parent").appendChild(clonediv);
       clonediv.id = clonediv.id+i;
     
       var clone = document.getElementsByTagName("select")[0];
       var cloneqte = document.getElementsByTagName("selectqte0")[0]; 
       i++;
       clone.name="select"+i;
       cloneqte.name="selectqte"+i;
     
    }
    Pouvez-vous de m'aider à renommer mon deuxième select svp ?
    et surtout à comprendre mon erreur?

    Merci d'avance.
    Cordialement.
    Sébastien.

  10. #10
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 859
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 859
    Points : 3 680
    Points
    3 680
    Par défaut
    Ce que tu demandes contredit ton précédent post!!! (entre autres);

    Merci de tenir compte des réponses qu'on prend le temps de te proposer.

  11. #11
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut
    Bonjour javatwister,

    Merci avant tout pour ton aide.

    Je viens de tester le code que tu viens de me donner, j'ai juste remplacer les nom pour que ca colle, mais ca ne fonctionne pas.

    Certainement je me suis planté quelque part mais j'ai beau chercher je ne trouve pas, aussi peux tu m'aider à trouver mon erreur stp?

    voici le code html:
    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
    <div name="parent" id="parent">
            <div id="med" name="med" class="med">
            <select name="select">
                <option value="" selected ></option>
                <?php
                    $sqlmed = "select 
                    id_medicament as idmed,
                    medicament_name as nom 
                    from medicament
                    order by medicament_name asc";
     
                    $requetemed = mysqli_query($conn, $sqlmed);
                    while ($donnemed = mysqli_fetch_assoc($requetemed)){?>
                        <option value="<?php echo $donnemed['idmed'] ?>"><?php echo $donnemed['nom'] ?></option>
                    <?php } ?>
                ?>
            </select>
            <select name="selectqte0">
                <option value="" selected ></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
            </div>
        </div>
        <button id="add" class="btn btn-success">Ajouter</button>

    Et voici le code javascript:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    document.getElementById("add").addEventListener("click", (e) => {
        let clone = document.getElementById("med").cloneNode(true);
        const nbr = document.getElementById("parent").getElementsByTagName("select").length;
        clone.id = "med" + nbr;
        clone.getElementsByTagName("select")[0].name = "selectmed" + nbr;
        nbr++;
        document.getElementById("parent").insertBefore(clone, e.target);
        e.preventDefault(); // ne pas envoyer le formulaire...
    }, false)
    Merci encore pour ton aide.
    Cordialement.
    Sébastien.

  12. #12
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 859
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 859
    Points : 3 680
    Points
    3 680
    Par défaut
    J'entrevois la pâle clarté d'une vague lueur.

    ca ne fonctionne pas
    Il faut que je me renseigne mais je crois qu'il y a un comité contre cette formule, au sein de ce forum: fais attention quand même.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="med" name="med" class="med">
    Je croyais t'avoir dit que cette déclaration de div comportait une erreur.

    Si tu ajoutes cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    clone.getElementsByTagName("select")[1].name = "selectqte"+ nbr;// ligne 6
    tu as de meilleures chances de modifier le nom du 2e select.
    Par contre, tu en profiteras pour changer la définition de nbr:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const nbr = document.getElementById("parent").getElementsByTagName("select").length / 2;// ligne 3

  13. #13
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut
    Voila je viens de ré-modifier mais malheureusement çà ne fonctionne pas.

    Je te renvoi le code pour voir si il y a une erreur.

    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
    <div name="parent" id="parent">
            <div id="med" class="med">
                <select name="select">
                    <option value="" selected ></option>
                    <?php
                        $sqlmed = "select 
                        id_medicament as idmed,
                        medicament_name as nom 
                        from medicament
                        order by medicament_name asc";
     
                        $requetemed = mysqli_query($conn, $sqlmed);
                        while ($donnemed = mysqli_fetch_assoc($requetemed)){?>
                            <option value="<?php echo $donnemed['idmed'] ?>"><?php echo $donnemed['nom'] ?></option>
                        <?php } ?>
                    ?>
                </select>
                <select name="selectqte">
                    <?php 
                    $i = 0;
                    while ($i <= 10){
                        echo' <option value="'.$i.'">'.$i.'</option>';
                        $i= $i+1;
                    } 
                    ?>
                </select>
            </div>
        </div>

    code js

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    document.getElementById("add").addEventListener("click", (e)=> {
       let clone=document.getElementById("med").cloneNode(true); 
       const nbr = document.getElementById("parent").getElementsByTagName("select").length / 2;// ligne 3
       //const nbr=document.getElementById("parent").getElementsByTagName("select").length;
    	clone.id="med"+nbr;
       clone.getElementsByTagName("select")[0].name="selectmed"+nbr;
       clone.getElementsByTagName("select")[1].name = "selectqte"+ nbr;// ligne 6
    	document.getElementById("parent").insertBefore(clone,e.target);
       e.preventDefault();// ne pas envoyer le formulaire...
    },false)
    merci de ton aide.

  14. #14
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 859
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 859
    Points : 3 680
    Points
    3 680
    Par défaut
    Il est vrai que tu nommes ta première liste "select" et non "selectmed" comme autrefois... ; je te suggère la modification

  15. #15
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut
    oui c est fait je viens de renommer mais ca ne fonctionne pas.

  16. #16
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 859
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 859
    Points : 3 680
    Points
    3 680
    Par défaut
    Citation Envoyé par Sebastien31t Voir le message
    ca ne fonctionne pas.
    Eeeeh non...; ça est revenu, comme dirait Stephen King...

  17. #17
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    août 2016
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : août 2016
    Messages : 35
    Points : 30
    Points
    30
    Par défaut
    Yes c'est on on y est arrivé !!!

    Avant tout un grand merci javatwister je me suis beaucoup inspiré de ton premier code.

    Voici ce que ça donne
    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
    <div name="parent" id="parent">
            <div id="med" class="med">
                <select name="selectmed1">
                    <option value="" selected ></option>
                    <?php
                        $sqlmed = "select 
                        id_medicament as idmed,
                        medicament_name as nom 
                        from medicament
                        order by medicament_name asc";
     
                        $requetemed = mysqli_query($conn, $sqlmed);
                        while ($donnemed = mysqli_fetch_assoc($requetemed)){?>
                            <option value="<?php echo $donnemed['idmed'] ?>"><?php echo $donnemed['nom'] ?></option>
                        <?php } ?>
                    ?>
                </select>
                <select name="selectqte1">
                    <?php 
                    $i = 0;
                    while ($i <= 10){
                        echo' <option value="'.$i.'">'.$i.'</option>';
                        $i= $i+1;
                    } 
                    ?>
                </select>
            </div>
        </div>

    Et pour la partie js:
    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
    var i = 2;
     
    function duplic()
    {
       var clonediv = document.getElementById("med").cloneNode(true);
       document.getElementById("parent").appendChild(clonediv);
     
     
       var clone = document.getElementsByTagName("select")[0];
       clone.name="selectmed"+i;
       var cloneqte = document.getElementsByTagName("select")[1];
       cloneqte.name="selectqte"+i;
     
       clonediv.id = clonediv.id+i;
       i++;
     
    }
    Sujet résolu !!

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

Discussions similaires

  1. Modifier la taille de la RAM apres clonage d'une image LINUX.
    Par rufa11 dans le forum Administration système
    Réponses: 12
    Dernier message: 09/10/2014, 11h50
  2. [XSLT] modifier le nom d'une balise
    Par valbrand dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 03/09/2008, 14h27
  3. modifier la valeur d'une balise
    Par gentil dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 16/04/2007, 17h15
  4. Réponses: 12
    Dernier message: 20/09/2006, 09h31
  5. Méthode qui permet de modifier le code d'une page après affichage .. ?
    Par winnie82 dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 04/07/2006, 15h40

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