"getElementById" d'un élément pas créé

**_Carole** · 30/09/2013, 12h07

Bonjour,
J'ai actuellement un formulaire qui n'a pas un nombre de champ défini, un petit bouton permet en effet d'ajouter des lignes de saisie.
Ce formulaire permet d'effectuer des demandes de ressources à différentes équipes.
J'aimerais que pour chaque équipe, un autre bouton permette d'ouvrir une pop-up qui renseigne l'utilisateur sur les disponibilités de l'équipe sélectionnée.

Cela marche correctement pour la première ligne, présente dans le HTML mais pas pour les suivantes, générées en javascript. J'obtiens l'erreur : "document.getElementById(nom_select) is null "

La fonction verif_dispo() ouvre la pop-up des disponibilités, create_champ() ajoute les lignes.

Visuel du formulaire

Code correspondant

Code javascript :

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
39
40
41
42
43
44
45
 
function verif_dispo(nom_select) {
            valeur = document.getElementById(nom_select).value;
            if (valeur === "") {
                alert("Pas d'équipe sélectionnée.");
            } else {
                var page = "surcharge.php?id=" + valeur;
                window.open(page, valeur, "menubar = no, status = no, scrollbars = no, menubar = no, width = 800, height = 600");
            }
        }
 
        function create_champ(i) {
 
            var i = parseInt($("#add_equ").attr("increment"));
            var contenu_tab = $('#tab_demande').html();
 
            var i2 = i + 1;
 
            $("#add_equ").attr("increment", i2);
 
            var equipe = 'equipe_' + i;
 
            var champs = '<input type="hidden" name="indice" value="' + i + '"/>' + i + '<tr><td><select name="role_' + i + '"><option> </option><option>C</option><option>P</option></select></td>' +
                    '<td><select name="' + equipe + '" id=' + equipe + '>' + $('.liste_equ').html() + '</select></td>' +
                    '<td><select name="annee_' + i + '">' + $('.liste_annee').html() + '</select></td>' +
                    '<td><input type="text" style="width:25px" name="1_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="2_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="3_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="4_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="5_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="6_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="7_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="8_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="9_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="10_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="11_' + i + '"></td>' +
                    '<td><input type="text" style="width:25px" name="12_' + i + '"></td>' +
                    '<td><input type="button"  onClick="verif_dispo(\' ' + equipe + ' \')" name="Submit" value="Disponibilité"></td>' +
                    '</tr>';
 
            contenu_tab = contenu_tab + champs;
 
            $('#tab_demande').html(contenu_tab);
 
        }

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<form method="POST" name="form_dmde">
 
<label for="nom">Nom du demandeur :</label><input type="text" id="nom" name="nom" style="width:300px" value="<?php echo $_SESSION['login']; ?>"><br />
    <br/>        
    <div id="test" style="min-height: 115px;padding-bottom: 15px;">     
        <table id="tab_demande" style="margin-bottom:10px;">
            <tr>
                <th>Rôle</th>
                <th>Equipe</th>
                <th>Année</th>
                <th>Jan</th>
                <th>Fév</th>
                <th>Mar</th>
                <th>Avr</th>
                <th>Mai</th>
                <th>Juin</th>
                <th>Juil</th>
                <th>Août</th>
                <th>Sept</th>
                <th>Oct</th>
                <th>Nov</th>
                <th>Déc</th>
                <th></th>
            </tr>
            <tr>
            <input type="hidden" name="indice" value="0"/>
            <td><select name="role_0"><option> </option><option>C</option><option>P</option></select></td>
            <td><?php echo select_equip('equipe_0'); ?></td>
            <td><?php echo select_annee('annee_0'); ?></td>
            <td><input type="text" style="width:25px" name="1_0"></td>
            <td><input type="text" style="width:25px" name="2_0"></td>
            <td><input type="text" style="width:25px" name="3_0"></td>
            <td><input type="text" style="width:25px" name="4_0"></td>
            <td><input type="text" style="width:25px" name="5_0"></td>
            <td><input type="text" style="width:25px" name="6_0"></td>
            <td><input type="text" style="width:25px" name="7_0"></td>
            <td><input type="text" style="width:25px" name="8_0"></td>
            <td><input type="text" style="width:25px" name="9_0"></td>
            <td><input type="text" style="width:25px" name="10_0"></td>
            <td><input type="text" style="width:25px" name="11_0"></td>
            <td><input type="text" style="width:25px" name="12_0"></td>
            <td><input type="button"  onClick="verif_dispo('equipe_0')" name="Submit" value="Disponibilité"></td>
            </tr>
        </table>
 
        <a id="add_equ" href="javascript:create_champ(1)" increment="1">Ajouter une équipe</a>
    </div>
    <script> document.write(i2); </script>

En vous remerciant d'avance.

**NoSmoking** · 30/09/2013, 12h12

Bonjour,
essaies pour commencer de mettre des " " atour de id

Code :

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

<select name="' + equipe + '" id=' + equipe + '>

**_Carole** · 30/09/2013, 12h38

Ca c'est une précédente tentative de ma part , qui n'a pas fonctionné non plus d'ailleurs.
Donc même en ayant :

Code :

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

<select name="' + equipe + '" id="' + equipe + '">

Pas de changement

**MisterPur** · 01/10/2013, 11h25

Bonjour _Carole,

Je pense que tu as un problème d'espace à cette endroit dans ta fonction create_champ().

Code :

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

'<td><input type="button"  onClick="verif_dispo(\' ' + equipe + ' \')" name="Submit" value="Disponibilité"></td>' +

Du coup quand tu créées ton champ en js, il rajoute les espaces et ne peut pas trouver l'id.
J'espère que ça pourra t'aider et résoudre ton problème.

[HS]Ceci est mon premier message sur le forum

[/HS]

**_Carole** · 01/10/2013, 12h02

Oh punaise, effectivement j'ai supprimé tout les espaces et là, ça marche !
Merci NetBeans qui permet d'indenter automatiquement du code et d'ainsi, créer des problèmes auxquels ont ne pense même pas...

En tout cas, Merci beaucoup et bienvenue sur DVP.net. Ton premier message m'ôtes une épine du pied (et me donne envie de me frapper la gueule dans les murs mais soit, passons...).

Bonne journée !

**andry.aime** · 01/10/2013, 12h05

Bonjour,

Code :

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

name="1_'

Evite de commencer la valeur de l'attribut name par un chiffre.

A+.

**_Carole** · 01/10/2013, 12h40

Merci du conseil. Ce chiffre représente les 12 mois de l'année, ça me semblais plus "simple" que d'avoir des "name=janvier", "name=fevrier", ...

Enfin bref, merci tout le monde

Bonne journée!