Champs avec le même nom incrémenté

Version imprimable

10/06/2020, 15h35
novembrezoulou

Champs avec le même nom incrémenté

bonjour,
je suis sur une appli Javascript + Php... (assez à l'aise en Php mais découvrant le JS)
Je récupère, depuis une BDD, des écritures comptables afin de pouvoir les modifier (en PHP)
Ainsi, le champ "date" de la première écriture est "d1', la 2è a pour champ "d2" etc. Je ne sais pas d'avance combien d'écritures seront dans mon masque de saisie puisque ça dépend du choix de l'utilisateur (période recherchée, secteur géographique, et. ), mais, en php, je partirai toujours de "d1" pour aller jusqu'à "d...x". Ça, je sais faire...
je voudrais confier le contrôle de surface à javascript afin qu'il s'assure que la date de l'écriture correspond uniquement à l'année comptable
Avec "document.formulaire.d1.value", je sais, aussi faire (le formulaire, lui, est écrit en php et je sais traiter ce champ en JS) mais je voudrais boucler vers "d2, d3, etc. en javascript afin d'effectuer ce contrôle sur le client et non le serveur.
Comment affecter une variable qui fasse explorer tout le formulaire en JS et descendre tous les champs de même nom de base ("d"), mais avec ce n° incrémenté ?
En codant les champs "en dur" ça fonctionne, bien sûr, mais, avec parfois plus de 100 écritures, ce n'est pas jouable car ça fait autant de lignes que d'écritures et le nombre d'écriture est aléatoire !
Merci de vos lumières
Claude
10/06/2020, 16h15
javatwister
bonjour,

honnêtement, donne un même attribut class à tous tes champs date et boucle avec
Code:

1 2 3 document.querySelectorAll("date_class").forEach(champ=>{ //test });
de cette manière, tu n'as même pas à compter combien tu as d'id ou de name qui t'intéressent;
10/06/2020, 17h52
novembrezoulou
j'ai essayé
Code:

1 2 3 4 5 var message=""; document.querySelectorAll("datSaisie").forEach(champ=>{ message=message+champ+"<br>"; }); alert(message);
et
Code:

1 2 3 4 5 var message=""; document.modif.querySelectorAll("datSaisie").forEach(champ=>{ message=message+champ+"<br>"; }); alert(message);
où "modif" est le nom du formulaire php
Rien ne s'affiche, ni dans un cas, ni dans l'autre...

J'ai bien trouvé des tutos de JS mais ceux-ci restent souvent au niveau des généralités...
Si j'ai bien compris, "champ" doit contenir les dates saisies ?

pour info, je joins mon "input" lequel me renvoie bien les valeurs incrémentées dans le $_POST du formulaire suivant
<input class="datSaisie" type="date" name="<?php echo("dat".$i);?>" value="<?php echo($ecritures[$i][2]);?>"</input> (je suis dans une boucle "for" pilotée par $i et la référence [2] correspond à la date de l'écriture)

Copie ce test, tu comprendras mieux:

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
<html>
<body>
<form id="f">
<div>
<input type="date"name="d0" class="class_date" /><br />
<input type="date"name="d1" class="class_date" /><br />
<input type="date"name="d2" class="class_date" /><br />
<input type="date"name="d3" class="class_date" /><br />
<input type="date"name="d4" class="class_date" /><br />
<input type="date"name="d5" class="class_date" /><br />
<input type="date"name="d6" class="class_date" /><br />
</div>
<button id="test">check</button>
</form>
<script>
document.querySelector("#test").addEventListener("click",(e)=>{
        document.querySelectorAll(".class_date").forEach(v=>{
                if(v.value.split("-")[0]!=new Date().getFullYear()){
                        console.log("Le champ suivant est invalide: ",v.name)
                }
        });
        e.preventDefault()
})
</script>
</body>
</html>

Entre des dates, clique sur le bouton et ouvre ta console.

10/06/2020, 19h04
novembrezoulou

Merci de cet exemple
Ne sachant où ouvrir la console, j'ai modifié console.log par alert... (navré, je suis un "vieux" retraité 72 ans ! mais... qui fait travailler ses méninges ! )
Par contre, j'ai dû remplacer la "," par un "+" derrière "invalide", certainement en raison de ma modif.
Ca marche parfaitement...
Je vais réutiliser...
Je n'ai plus qu'à aller chercher l'explication de toutes les instructions que je ne connais pas (pas vues dans les tutos basiques) pour comprendre ce que cela fait car j'aime bien savoir et ne pas "pomper" bêtement sur un forum.
Encore merci de ta disponibilité
NZ
PS. Je vais faire 2 ou 3 tests "en vrai" et si je m'en sors sans dégât, je fermerai le sujet.
10/06/2020, 22h10
novembrezoulou

1 pièce(s) jointe(s)

Je suis vraiment désolé... (complètement bouché ?)
J'ai exactement retranscrit dans mon code mais rien ne se passe...
Plutôt que de l'injecter dans le post, j'ai joint le code.
Je ne vois pas ce qui cloche... J'ai laissé "alert()" puisque c'est, justement ce que souhaite.
Peut-être une erreur de code te sauteras aux yeux... (Par souci de clarté, j'ai retiré tous les appels aux bases de données et les css, d'où la tête de l'affichage)
Question subsidiaire, si aucune erreur n'est détectée (A ce stade, je vérifie uniquement que, pour chaque ligne, aucune zone obligatoire n'a été omise), puis-le lancer un document.submit() avec un "else" car ce bouton valide l'ensemble de la page car toutes les autres erreurs sont détectées avec des "onBlur()" ?
Merci
10/06/2020, 22h28
ProgElecT

Salut

Citation:

Ne sachant où ouvrir la console, j'ai modifié console.log par alert...

Pour avoir voir la sortie console, il faut faire F12, c'est le débogueur dans ton navigateur, console te donne plus d'informations qu'un alert(), il te permettra de mettre au point ton programme.
Reste à toi de mettre des alert() plus tard si tu en exprimes encore le besoin par la suite.
10/06/2020, 22h32
javatwister

Déplace simplement le script en fin de body, pour que les éléments html que tu appelles soient chargés;
10/06/2020, 22h42
novembrezoulou

Merci à vous deux
En déplaçant le script, ça fonctionne.
J'ai pris l'habitude de mettre mes JS en tête de bloc... est-ce à dire qu'il serait plus judicieux de systématiquement les mettre en fin de bloc ?
Puis-je mettre un document.sumbit dans un else ?
(je pense qu'après, je vous laisserai tranquille !)
PS. je viens de découvrir console.log :) Eh oui, on apprend à tout âge !
10/06/2020, 22h54
javatwister

[peut-être le format de $ecritures[$i][2]...

Le problème, si tu nous mets du php, c'est qu'on n'a aucun moyen de voir le rendu html;]

@novembrezoulou : merci de ne pas effacer un post où tu signales un problème une fois qu'on y a répondu; sinon, on passe pour des c...
10/06/2020, 23h40
novembrezoulou

Navré... Je pensais que tu pouvais le voir.

Grâce à vos explications, j'ai réussi à mettre en place le contrôle de validité que je souhaitais.
La règle du jeu est que si l'une des zones obligatoire de la ligne "écriture", deux autres doivent l'être aussi (date, référence et montant)
En partant de l'exemple posté par javaTwister, j'ai réalisé ça...
Encore merci, je mets la discussion en résolue

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
<!-- fonctions javascript -->
<!-- <SCRIPT language="JavaScript"> -->
<script>
        function verif()
        {
                var dat=Array();
                var syno=Array();
                var credi=Array();
                var debi=Array();
                var numEcriture=Array();
                var compte=0;
                var message="";
 
                document.querySelectorAll(".numEcr").forEach(v=>
                {
                        numEcriture[compte]=v.value;
                        compte=compte+1;
        });
                compte=0;
                document.querySelectorAll(".datSaisie").forEach(v=>
                {
            dat[compte]=v.value;
                        compte=compte+1;
        });
                compte=0;
                document.querySelectorAll(".synopsis").forEach(v=>
                {
            syno[compte]=v.value;
                        compte=compte+1;
        });
                compte=0;
                document.querySelectorAll(".debit").forEach(v=>
                {
            debi[compte]=v.value;
                        compte=compte+1;
        });
                compte=0;
                document.querySelectorAll(".credit").forEach(v=>
                {
            credi[compte]=v.value;
                        compte=compte+1;
        });
                compte=0;
                while(compte<numEcriture.length)
                        {
                                if((  // si l'une des zones obligatoires est servie :
                                        dat[compte]!=="" || syno[compte]!=="" || debi[compte]!=="0.00" || credi[compte]!=="0.00" )
                                && // et
                                // que la date est à blanc
                                        (dat[compte]=="" 
                                        // ou 
                                         || 
                                         // que synopsis est à blanc
                                         syno[compte]=="" 
                                         || //ou
                                         // que la somme débit + crédit = 0
                                          (debi[compte]<0.01 && credi[compte]<0.01)))
                                {
                                        message=message+numEcriture[compte]+", ";
                                }
                                compte++;
                        }
                if(message!=="")
                {
                        alert("Les lignes "+message+" sont invalides")
                }
                else
                {
                        document.modif.submit();
                }
        }
</script>
<!-- fonctions javascript -->