Récupérer la saisie d'un formulaire HTML par sélecteur complexe

**mormic** · 01/05/2024, 18h59

Bonjour à tous
J'ai une page HTML ainsi:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<h3>Manoeuvre 0</h3>
        <div id="m0">
            <input type="text" class="equipe_add" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add">Adresse de l'équipement</label>
            <input type="radio" class="volet" name="equip0"/>
            <label for="volet">Volet</label>
            <input type="radio" class="local_relais" name="equip0"/>
            <label for="local_relais">Relais central</label>
            <input type="radio" class="distant_relais" name="equip0"/>            
            <label for="distant_relais">Relais distant --</label>
            <label for="n_relais">N° du relais</label>
            <input type="number" class="n_relais" maxlength="1" size="1" min="1" max="8"/>
        </div>

Ce code est répété 9 fois avec des div "m1" "m2" .... jusqu'à m9 et des name radio equip1 equip2.....equip9

je souhaite après saisie récupérer les infos dans des tableaux

Code :

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

1
2
3
let adEquipe= new Array(10);
let typeEquipe= new Array(10);
let numRelais= new Array(8);

Je doit utiliser des boucles mais je n'arrive pas à utiliser les sélecteurs CSS.

Si quelqu'un peut éclairer ma lanterne. Merci

**mathieu** · 01/05/2024, 21h06

vous pouvez aussi récupérer les balises en utilisant leurs classes comme expliqué là :
https://developer.mozilla.org/fr/doc...ntsByClassName

si vous avez besoin de plus d'aide, montrez nous le code que vous avez testé ainsi que le résultat du débugage.

**mormic** · 02/05/2024, 10h11

Merci pour votre aide
J'ai d'abord essayé cela:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function lectureSaisie(){
    for(let i=0;i<10;i++){             
        adEquipe[i]= document.querySelectord("#m" + i + "equipe_add").value; 
        numRelais[i]= document.querySelector("#m" + i + "n_relais").value;   
        for(let j=0;j<3;j++){
            let equipe = document.querySelectorAll( '#m' + i + '+ .input["name=equip" + i]');
            if(equipe[j].checked){
                typeEquipe[i]= equipe[j].value;
                break;
            }    
        }
    }
    alert("Adresse1 " + adEquipe[1] + " " + numRelais[1] + " " + typeEquipe[1]);
}

Mais ça ne fonctionne pas.
Je viens d'essayer cela:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
unction lectureSaisie(){
    for(let i=0;i<10;i++){   
        adEquipe[i]= document.getElementById("m" + i).getElementsByClassName("equip_add").value;         
        numRelais[i]= document.getElementById("m" + i).getElementsByClassName("n_relais").value;
        for(let j=0;j<3;j++){
            let equipe = document.getElementById('m' + i).getElementsByClassName('input["name=equip" + i]');
            if(equipe[j].checked){
                typeEquipe[i]= equipe[j].value;
                break;
            }    
        }
    }
    alert("Adresse1 " + adEquipe[1] + " " + numRelais[1] + " " + typeEquipe[1]);
}

Toujours rien ne s'affiche.

**NoSmoking** · 02/05/2024, 11h26

Bonjour,
une première remarque concernant ton HTML, l'attribut for des <label> doit faire référence à une ID et uniquement une ID, or tes <input> n'en ont pas.

Maintenant concernant ta récupération tes « sélecteur complexe » n'ont rien de complexe, ils sont simplement mal écrits

"#m" + i + "equipe_add" va te donner

Code :

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

1
2
3
"#m0equipe_add"
"#m1equipe_add"
// ...

ce qui correspond à des ID au sens CSS de la chose.

Visiblement ce que tu cherches à obtenir c'est

Code :

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

1
2
3
"#m0 .equipe_add"
"#m1 .equipe_add"
// ...

donc à réviser les sélecteurs CSS et correction du code ...

Ceci étant dit il me semble qu'un document.querySelectorAll(".equipe_add") te permettrait de tout récupérer d'un coup et ainsi dimensionner correctement tes tableaux !

**mormic** · 02/05/2024, 12h57

l'attribut for des <label> doit faire référence à une ID et uniquement une ID, or tes <input> n'en ont pas.

Comme j'ai 10 fois le même masque de saisie avec 10 fois le même label, j'ai trouvé judicieux d'affecter ce label à une classe et cela fonctionne bien.
Mettre un id à chaque input de saisie fait perdre l'avantage de la recherche par index.

réviser les sélecteurs CSS

Je viens d'essayer cela:

Code :

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

1
2
3
4
for(let i=0;i<4;i++){
        let x =  document.querySelector("#m" + i + " " + ".equipe_add");
        adEquipe[i]= x.value;
}

Mais toujours pas d'affichage.

**mathieu** · 02/05/2024, 15h24

quand je teste votre code, je vois des messages d'erreur dans la console.
êtes-vous sûr de bien regarder au bon endroit ?

**mormic** · 03/05/2024, 10h57

mon fichier HTML complet (j'ai corrigé selon la remarque de Nosmoking à propos des id des input):

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Programmation horaire domotique Mormic</title>
        <link href="styleProg.css" rel="stylesheet" type="text/css" />    
        <script src="codeProg.js" async></script>  
    </head>
    <body>
        <h2>Programmation horaire</h2>
        <label for="prog_num">N° de programme</label>
        <input type="text" id="prog_num" maxlength="1" size="1" pattern="[0-9]"/>
        <label for="sauveRAM">Enregistrement</label>
        <button class="bouton" id="sauveRAM">RAM</button>
        <button class="bouton" id="sauveSPIFF">ROM</button>
        <label for="retour">Fin de saisie</label>
        <button class="bouton" id="retour">FIN</button>
        <h3>Manoeuvre 0</h3>
        <div id="m0">
            <input type="text" id="equipe_add0" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add0">Adresse de l'équipement</label>
            <input type="radio" id="volet0" value="volet" name="equip0"/>
            <label for="volet0">Volet</label>
            <input type="radio" id="local_relais0" value="relais_local" name="equip0"/>
            <label for="local_relais0">Relais central</label>
            <input type="radio" id="distant_relais0" value="relais_distant" name="equip0"/>            
            <label for="distant_relais0">Relais distant --</label>
            <label for="n_relais0">N° du relais</label>
            <input type="number" id="n_relais0" maxlength="1" size="1" min="1" max="8"/>
        </div>
        <div class="action">
            <input type="radio" name="acte" class="ferme"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" name="acte" class="ouvre"/>
            <label for="ouvre">Ouverture --</label>
            <label for="taux">Taux</label>
            <input type="number" class="taux" value="100" maxlength="3" size="3" min="0" max="100"/>
            <label for="hr">-- Heure</label>
            <input type="time" class="hr"/>
        </div>
        <h3>Manoeuvre 1</h3>
        <div id="m1">
            <input type="text" id="equipe_add1" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add1">Adresse de l'équipement</label>
            <input type="radio" id="volet1" value="volet" name="equip1"/>
            <label for="volet1">Volet</label>
            <input type="radio" id="local_relais1" value="relais_local" name="equip1"/>
            <label for="local_relais1">Relais central</label>
            <input type="radio" id="distant_relais1" value="relais_distant" name="equip1"/>
            <label for="distant_relais1">Relais distant --</label>
            <label for="n_relais1">N° du relais</label>
            <input type="number" id="n_relais1" maxlength="1" size="1" min="1" max="8"/>
        </div>
        <div class="action">
            <input type="radio" name="acte" class="ferme"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" name="acte" class="ouvre"/>
            <label for="ouvre">Ouverture --</label>
            <label for="taux">Taux</label>
            <input type="number" class="taux" value="100" maxlength="3" size="3" min="0" max="100"/>
            <label for="hr">-- Heure</label>
            <input type="time" class="hr"/>
        </div>
        <h3>Manoeuvre 2</h3>
        <div id="m2">
            <input type="text" id="equipe_add2" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add2">Adresse de l'équipement</label>
            <input type="radio" id="volet2" name="equip2"/>
            <label for="volet2">Volet</label>
            <input type="radio" id="local_relais2" name="equip2"/>
            <label for="local_relais2">Relais central</label>
            <input type="radio" id="distant_relais2" name="equip2"/>            
            <label for="distant_relais2">Relais distant --</label>
            <label for="n_relais2">N° du relais</label>
            <input type="number" id="n_relais2" maxlength="1" size="1" min="1" max="8"/>
        </div>
        <div class="action">
            <input type="radio" name="acte" class="ferme"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" name="acte" class="ouvre"/>
            <label for="ouvre">Ouverture --</label>
            <label for="taux">Taux</label>
            <input type="number" class="taux" value="100" maxlength="3" size="3" min="0" max="100"/>
            <label for="hr">-- Heure</label>
            <input type="time" class="hr"/>
        </div>
        <h3>Manoeuvre 3</h3>
        <div id="m2">
            <input type="text" id="equipe_add3" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add3">Adresse de l'équipement</label>
            <input type="radio"  id="volet3" name="equip3"/>
            <label for="volet3">Volet</label>
            <input type="radio" id="local_relais3" name="equip3"/>
            <label for="local_relais3">Relais central</label>
            <input type="radio" id="distant_relais3" name="equip3"/>            
            <label for="distant_relais3">Relais distant --</label>
            <label for="n_relais3">N° du relais</label>
            <input type="number" id="n_relais3" maxlength="1" size="1" min="1" max="8"/>
        </div>
        <div class="action">
            <input type="radio" name="acte" class="ferme"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" name="acte" class="ouvre"/>
            <label for="ouvre">Ouverture --</label>
            <label for="taux">Taux</label>
            <input type="number" class="taux" value="100" maxlength="3" size="3" min="0" max="100"/>
            <label for="hr">-- Heure</label>
            <input type="time" class="hr"/>
        </div>
        <h3>Manoeuvre 4</h3>
        <div>
            <input type="text" id="equipe_add4" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add4">Adresse de l'équipement</label>
            <input type="radio" name="equip4" id="volet4"/>
            <label for="volet4">Volet</label>
            <input type="radio" name="equip4" id="local_relais4"/>
            <label for="local_relais4">Relais central</label>
            <input type="radio" name="equip4" id="distant_relais4"/>            
            <label for="distant_relais4">Relais distant --</label>
            <label for="n_relais4">N° du relais</label>
            <input type="number" id="n_relais4" maxlength="1" size="1" min="1" max="8"/>
        </div>
        <div class="action">
            <input type="radio" name="acte" class="ferme"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" name="acte" class="ouvre"/>
            <label for="ouvre">Ouverture --</label>
            <label for="taux">Taux</label>
            <input type="number" class="taux" value="100" maxlength="3" size="3" min="0" max="100"/>
            <label for="hr">-- Heure</label>
            <input type="time" class="hr"/>
        </div>

Mon nouveau prog javascript en cours de développement:

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
39
40
let touche;
let sauvegardeOk=false;
let progNum=0;
let adEquipe= new Array(10);
let typeEquipe= new Array(10);
let numRelais= new Array(8);
let listeBouton = document.querySelectorAll(".bouton");     //tous les boutons de la page
listeBouton.forEach(function(k){
    k.addEventListener("click", function(f){
        touche = f.target.innerHTML;
        //debut de la saisie
        if(touche=="RAM"){
            lectureSaisie();
            //ecriture en RAM
            sauvegardeOk=true;
        }
        else if(touche=="ROM"){
            lectureSaisie();
            //ecriture en ROM
            sauvegardeOk=true;
        }
        else if(touche=="FIN"){
            if(!sauvegardeOk) alert("La sauvegarde n'est pas faite");
            else alert("retour à la domotique Mormic");
        }
    })  
})
function lectureSaisie(){
    progNum=document.getElementById("prog_num").value;
    alert(progNum);
    for(let i=0;i<4;i++){
        adEquipe[i]= document.getElementById("equipe_add" + i).value;
        numRelais[i]= document.getElementById("n_relais" + i).value;
        let y = "equip" + i.toString();
        let x = document.querySelector("input[name=y]:checked");
        if(x!=null){typeEquipe[i]= x.value; }
        else{typeEquipe[i]="0"; }
    }
    alert("Adresse1 " + adEquipe[1] + " " + numRelais[1] + " " + typeEquipe[1]);
}

mon style CSS en cours de développement:

Code css :

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
html{
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
}
#prog_num{
    margin-right: 40px;
}
#sauveSPIFF{
    margin: 40px 40px;
}
.bouton{
    color: darkmagenta;
}
.taux{
    color: chartreuse;
}
.hr{
    color: coral;
}

Après une saisie, tous les x (document.querySelector("input[name=y]:checked")) sont toujours null.
Où est mon erreur?

**NoSmoking** · 03/05/2024, 11h35

Avant de continuer, et vu la position d'appel de ton script, modifie la ligne :

Code html :

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

<script src="codeProg.js" async></script>

en

Code html :

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

<script src="codeProg.js" defer></script>

Ressource :

Les scripts: async, defer

**mormic** · 03/05/2024, 18h33

je viens de trouver la solution ainsi:

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
function lectureSaisie(){
    progNum=document.getElementById("prog_num").value;
    alert(progNum);
    for(let i=0;i<4;i++){
        adEquipe[i]= document.getElementById("equipe_add" + i).value;
        numRelais[i]= document.getElementById("n_relais" + i).value;
        let y = "equip" + i.toString();
        let x = document.querySelectorAll("input[name=" + y + "]");
        typeEquipe[i] = "0";
        for(let z of x){
            if(z.checked) {
                typeEquipe[i]= z.value;
                break;
            }
        }
    alert("Adresse " + i + " " + adEquipe[i] + " " + numRelais[i] + " " + typeEquipe[i]);    
    }   
}

Mon code querySelectorAll était erroné.
Le bon est :

Code :

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

let x = document.querySelectorAll("input[name=" + y + "]");

Merci pour votre aide.

Récupérer la saisie d'un formulaire HTML par sélecteur complexe

JavaScript

Discussions similaires

Partager

Partager