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

Version imprimable

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:

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:

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.

07/10/2019, 13h28
javatwister

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.
07/10/2019, 13h41
mathieu

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/
07/10/2019, 19h46
Sebastien31t

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
07/10/2019, 21h01
javatwister
concrètement, si tu veux cloner ta liste déroulante et l'insérer dans la même div, ça donne ça:
Code:

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à;
07/10/2019, 21h12
Sebastien31t

javatwister,

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

Merci d'avance.
Cordialement.
Sébastien

imaginons ton formulaire

Code:

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:

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)

08/10/2019, 11h53
NoSmoking

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 :aie:

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.

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:

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:

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.

08/10/2019, 13h35
javatwister

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.

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. 8O

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:

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:

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.

09/10/2019, 18h01
javatwister

J'entrevois la pâle clarté d'une vague lueur.

Citation:

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.

Citation:

Code:

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

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:

const nbr = document.getElementById("parent").getElementsByTagName("select").length / 2;// ligne 3

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:

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:

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.

09/10/2019, 19h07
javatwister

Il est vrai que tu nommes ta première liste "select" et non "selectmed" comme autrefois... ; je te suggère la modification :roll:
09/10/2019, 20h41
Sebastien31t

oui c est fait je viens de renommer mais ca ne fonctionne pas.
09/10/2019, 21h11
javatwister

Citation:

Envoyé par Sebastien31t

ca ne fonctionne pas.

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

Yes c'est on on y est arrivé !!!:ptdr:

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

Voici ce que ça donne

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

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