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
    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
    Expert confirmé
    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
    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
    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
    Expert confirmé
    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
    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
    Expert confirmé
    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

    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
    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
    Expert confirmé
    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
    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
    Expert confirmé
    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
    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
    Expert confirmé
    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
    oui c est fait je viens de renommer mais ca ne fonctionne pas.

  16. #16
    Expert confirmé
    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
    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 !!

###raw>template_hook.ano_emploi###