Champs avec le même nom incrémenté

**novembrezoulou** · 10/06/2020, 15h35

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

**javatwister** · 10/06/2020, 16h15

bonjour,

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

Code javascript :

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

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;

**novembrezoulou** · 10/06/2020, 17h52

j'ai essayé

Code :

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

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

et

Code :

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

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)

**javatwister** · 10/06/2020, 18h25

Copie ce test, tu comprendras mieux:

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

**novembrezoulou** · 10/06/2020, 19h04

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.

**novembrezoulou** · 10/06/2020, 22h10

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

Champs avec le même nom incrémenté

JavaScript

Vue hybride

Discussions similaires

Partager

Partager