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

Version imprimable

Bonjour à tous
J'ai une page HTML ainsi:

Code:

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:

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

01/05/2024, 21h06
mathieu

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.

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

Code:

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:

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.

02/05/2024, 11h26
NoSmoking
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 :mrgreen:
"#m" + i + "equipe_add" va te donner
Code:

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:

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 !
02/05/2024, 12h57
mormic
Citation:

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.

Citation:

réviser les sélecteurs CSS

Je viens d'essayer cela:
Code:

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.
02/05/2024, 15h24
mathieu

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

correction

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

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

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:

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?

03/05/2024, 11h35
NoSmoking
Avant de continuer, et vu la position d'appel de ton script, modifie la ligne :

Code:

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

en

Code:

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

Ressource :
- Les scripts: async, defer

je viens de trouver la solution ainsi:

Code:

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:

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

Merci pour votre aide.