Discussion :

[Draleg]

Bonjour j'ai trouver sur le net un script qui explique comment cloner une zone modèle html en javascript et y modifier ces attribus, en suivant le même principe j'ai rajouter un éléments permettant de récupérer la valeur du compteur en cours pour travailler le contenu de la zone modèle dupliquée, voila ce que ça donne:

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<select id="select_modele" name="modele" style="display:none;">
   <option value="blabla1">TEXTE1</option>
   <option value="blabla2">TEXTE2</option>
   <option value="blabla3">TEXTE3</option>
</select>
<input type="hidden" name="input" id="input_modele" value="-2" />
<div id="Cible"> </div>
<button onclick="javascript:addSelect('contrat');" type="button">Ajouter un contrat</button>

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
      var i=0;
      function addSelect(typ_select)
      {
        i++;
        // On récupère l'endroit où devra être ajouté la liste
        var Cible = document.getElementById("Cible");
 
        // On récupère la liste modèle
        var liste = document.getElementById("select_modele");
        // On la clone dans une nouvelle variable
        var nvxListe = liste.cloneNode(true);
 
        // On récupère l'input modèle
        var input = document.getElementById("input_modele");
        // On la clone dans une nouvelle variable
        var nvxInput = input.cloneNode(true);
 
        // creation d'un saut de ligne
        var br = document.createElement("br");
 
 
        // On adapte les attributs de la nouvelle liste
        nvxListe.name = typ_select + i;
        nvxListe.style.display = "inline";
 
        // On cree l'input qui contiendra a chaque fois la valeur du i ce qui nous permettra de pouvoir faire les enregistrement
        nvxInput.name = typ_select;
        nvxInput.id = typ_select;
        nvxInput.value = i;
        nvxInput.type = "hidden";
 
 
        // On ajoute tout ça à l'emplacement voulu
        Cible.appendChild(nvxListe);
        Cible.appendChild(nvxInput);
        Cible.appendChild(br);
      }

J'ai voulu tester si il y avait moyen de cloner une zone plus complexe tel qu'un div, et cela fonctionne via la même manière...

HTML

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
 
                        <!-- ____________DEBUT DE LA ZONE MODELE (NON VISIBLE)______________ -->  
                        <div id="modele" style="display:none;">
                        <table>                                                              
                          <tr>
                            <td>TITRE</td>
                            <td>
                               <select id="select_modele" name="modele" style="display:none;">
                                 <option value="blabla1">TEXTE1</option>
                                 <option value="blabla2">TEXTE2</option>
                                 <option value="blabla3">TEXTE3</option>
                               </select>
                             </td>
                          </tr>
                          <tr>
                            <td><label for="dain">Date d entrée : </label></td>
                            <td><input type="text" name="dain" id="dain" value="X" tabindex="40" /><br /></td>
                          </tr>
                          <tr>
                            <td><label for="danom">Date de nomination : </label></td>
                            <td><input type="text" name="danom" id="danom" value="X" tabindex="40" /><br /></td>
                          </tr>    
                        </table>           
                        </div>
                        <input type="hidden" name="input" id="input_modele" value="-2" />                             
                        <!-- ______________FIN DE LA CREATION DE LA ZONE MODELE_____________ -->
<div id="Cible"> </div>
<button onclick="javascript:addSelect('contrat');" type="button">Ajouter un contrat</button>

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
      var i=0;
      function addSelect(typ_select)
      {
        i++;
        // On récupère l'endroit où devra être ajouté la liste
        var Cible = document.getElementById("Cible");
 
        // On récupère la liste modèle
        var div = document.getElementById("modele");
        // On la clone dans une nouvelle variable
        var nvxDiv = div.cloneNode(true);
 
        // On récupère l'input modèle
        var input = document.getElementById("input_modele");
        // On la clone dans une nouvelle variable
        var nvxInput = input.cloneNode(true);
 
        // creation des attribus td du tableau de la page principale
        var br = document.createElement("br");
 
 
        // On adapte les attributs de la nouvelle liste
        nvxDiv.name = typ_select + i;
        nvxDiv.style.display = "inline";
 
        // On cree l'input qui contiendra a chaque fois la valeur du i ce qui nous permettra de pouvoir faire les enregistrement
        nvxInput.name = typ_select;
        nvxInput.id = typ_select;
        nvxInput.value = i;
        nvxInput.type = "hidden";
 
 
        // On ajoute tout ça à l'emplacement voulu
        Cible.appendChild(nvxDiv);
        Cible.appendChild(nvxInput);
        Cible.appendChild(br);
      }

Cela fonctionne, je copie l'entièreté de mon div, mais il me vient une question:
Y a t'il moyen d'aller chercher les attributs des éléments contenu dans le div et de les modifier de la même manière que pour le div lui même?

Je répondrais oui a première vue, car je clone un div ayant du contenu, et donc pour moi ce contenu peut être modifié(fin selon MA logique lol).
Si c'est bien oui, la question que je me poserai alors c'est comment ?
Si c'est non, je suppose donc que je dois créer tout des éléments modèle afin de les modifier 1 par 1 dans le script?


PS: Si vous voyez des aberrations dans le code, soyez indulgent et dite le moi car je débute en javascript et je ne connais absolument pas ces possibilités.

Merci d'avance

[SpaceFrog]

as tu essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  nvxInput.getElementsByTagName('options')

voire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(nvxInput.innerHTML)

[Draleg]

J'ai essayé deux méthode:

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

nvxDiv.getElementsByTagName('select').name = "select_" + typ_select + i ;

Consoles d'erreurs

Erreur : nvxDiv.getElementsByTagName is not a function
Fichier source : http://inf06/grh/dynamique/Input/fonctions.js
Ligne : 36

La ligne 36 étant celle du code JS...

J'ai essayé autrement:
JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var select = nvxDiv.getElementsByID("select_modele");
        select.name = "select_" + typ_select + i ;

Erreur : nvxDiv.getElementsByID is not a function
Fichier source : http://inf06/grh/dynamique/Input/fonctions.js
Ligne : 36

Pour l'alert ce que tu me propose me donne un panneau vide(la commande ayant été mise a la fin de la fonction. Concernant le retour de l'input je suis sur je le test déjà sur ma page de test via du php je récupère bien la valeur du i, mais comme il ne fait pas partit du div modèle, et qu'il est cloner la gestion de son contenu est a part...(fin je présume)

J'ai essayé un autre type d'alert:
JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(nvxDiv.name);

Et la je recois bien : modele1.

J'ai donc essayé:
JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(nvxDiv.getElementByTagName('select').name);

Et je retombe sur le meme type d'erreur comme quoi getElementBy... n'est pas une fonction.


J'ai oublier de le précisé mais le but même de tout ça est donc de générer un élément via un clic bouton(ça tu l'avais déjà compris mdr) et de récupérer le contenu de ces éléments via PHP pour les enregistrer dans une BD MySql.
Le fait est que pour récupérer le contenu je dois avoir un nom d'élément différent sinon c'est le dernier éléments qui écrase les précédant.
C'est donc pour cela que je cherche a modifier le contenu de ce bloc cloné.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementsByTagName

[jbrasselet]

Juste une petite chose, fais bien attention à l'écriture des fonctions :

pour les tag name c'est getElementsByTagName
pour les id c'est getElementById (sans s à élément)

[Draleg]

Ha bien vu merci mais cela ne change pas le problème il dis que ce n'est pas une fonction :'(.

Mais je prend note effectivement c'est subtile comme nuance...

Pour l'alert sans la faute de syntaxe:
JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(nvxDiv.getElementsByTagName('select'));

Me renvois que c'est un objet de type HTMLCollection

[SpaceFrog]

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
<script type='text/javascript'>
function foo(){
var nvxDiv=document.getElementById('one').cloneNode(true)
alert(nvxDiv.getElementsByTagName('input')[0].value)
nvxDiv.getElementsByTagName('input')[0].id="othername";
 
alert(nvxDiv.getElementsByTagName('input')[0].id)
}
</script>
</head>
 
<body>
<div id='one'>
<input type='text' name='first' value='coucou' />
</div>
<input type='button' onclick='foo()' value='go' />
 
</body>

il semblerait du getElementById soit limité au document, il faudra appender avant ...

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
 
<script type='text/javascript'>
function foo(){
var nvxDiv=document.getElementById('one').cloneNode(true)
alert(nvxDiv.getElementsByTagName('input')[0].value)
nvxDiv.getElementsByTagName('input')[0].id="othername";
nvxDiv.getElementsByTagName('input')[0].value="hello";
 
document.body.appendChild(nvxDiv)
 
 
alert(document.getElementById('othername').value)
}
</script>
</head>
 
<body>
<div id='one'>
<input type='text' name='first' value='coucou' />
</div>
<input type='button' onclick='foo()' value='go' />

[Draleg]

Franchement génial ça se rapproche de ce que je veux faire
Tu as ete plus vite que moi mdr j'allais encore faire un long bidule, correspondant a ton 2eme essai avec la question suivante:

[0] correspond donc a la valeur du premier input trouvé dans le bloc en question donc si j'ai 5 input si je veux le 3eme je dois mettre:
nvxDiv.getElementsByTagName('input')[2].id ?

[SpaceFrog]

getElementsByTagName retourne une collection dont le premier incide est 0 ...

[Draleg]

Je viens de tester, la question n'était même pas à poser lol.


Et bien je vais cliquer comme étant résolu

J'espère juste ne plus avoir de problèmes pour évité les doublons


Mille merci pour la rapidité et la qualité de tes réponses