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

**Sebastien31t** · 07/10/2019, 12h30

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.

**javatwister** · 07/10/2019, 13h28

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.

**mathieu** · 07/10/2019, 13h41

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/

**Sebastien31t** · 07/10/2019, 19h46

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

**javatwister** · 07/10/2019, 21h01

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à;

**Sebastien31t** · 07/10/2019, 21h12

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

**javatwister** · 08/10/2019, 10h28

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)

**NoSmoking** · 08/10/2019, 11h53

Bonjour,

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.

**Sebastien31t** · 08/10/2019, 13h16

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.

**javatwister** · 08/10/2019, 13h35

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.

**Sebastien31t** · 09/10/2019, 15h41

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.

**javatwister** · 09/10/2019, 18h01

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

**Sebastien31t** · 09/10/2019, 18h58

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.

**javatwister** · 09/10/2019, 19h07

Il est vrai que tu nommes ta première liste "select" et non "selectmed" comme autrefois... ; je te suggère la modification

**Sebastien31t** · 09/10/2019, 20h41

oui c est fait je viens de renommer mais ca ne fonctionne pas.

**javatwister** · 09/10/2019, 21h11

Envoyé par Sebastien31t

ca ne fonctionne pas.

Eeeeh non...; ça est revenu, comme dirait Stephen King...

**Sebastien31t** · 09/10/2019, 21h37

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 !!

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

JavaScript

Discussions similaires

Partager

Partager