Tableaux Javascipt : comment les traiter ?

Résolu/Fermé
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - Modifié le 7 mai 2020 à 19:34
jordane45 Messages postés 38216 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 juin 2024 - 8 mai 2020 à 21:07
Bonjour,

Je cale sur Javascript...

j'ai une page (PHP/HTML) dans laquelle je saisis des mots-clefs.

<form method="post" name="addkw" ...>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>
<input type="submit" name="submit" value="Enregistrer">


Côté PHP, ça marche bien, je récupère mon tableau par :
$keywords = $_POST["keyword"];


Si je n'en saisis que trois, et que j'exécute l'instruction
print_r($keywords);
j'aurai par exemple :
Array
(
    [0] => méthodes
    [1] => algorithmes
    [2] => fonctions
    [3] =>
    [4] =>
))

et si je demande
echo $keywords[1];
ça m'écrira
algorithmes
.
Côté PHP, tout va bien.

Pour éviter du trafic réseau inutile, je ne teste pas --ou le moins possible-- côté PHP (côté serveur). Je teste toujours côté client (avec javascript) les erreurs qui peuvent être testées sur place pour ne faire partir le formulaire que s'il est correct (tester la présence de la saisie, l'utilisation seulement des caractères autorisés, validité d'une date, etc.)

Là, en l'occurrence, je dois tester la présence d'au moins un mot-clef (ne pas saisir obligatoirement les 5) et que ceux-ci ne contiennent que les caractères autorisés : lettres + chiffres, pas d'espace ni signe de ponctuation sauf le souligné et le trait-d'union (j'ai des fonctions pour ça).

D'habitude pour tester un champ texte (nommé keyword) qui corresponde à cette condition, je code comme ceci :

~~~~~~~~~ Fichier externe: fonctions.js ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ===== Fonctions et variables

// Renvoie la chaine "OK" ou un mesage d'erreur
function isValidText(nomchamp,car_autorises,lg_mini,lg_maxi) {
	// ... instructions de test ...
	// erreur: return "Saisie trop courte";
	// erreur: return "Saisie trop longue";
	// erreur: return "Caractères non autorisés";
	return "OK";
}

// Toutes les autres fonctions de test (dates, heures, nombres, ...)

// Caractères standards autorisés
var ascii   = "abcdefghijklmnopqrstuvwxyz";
var lettres = "abcdefghijklmnopqrstuvwxyzàâäéèêëîïùûüç";
var digits  = "0123456789";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Dans ma page :

<script type="text/javascript" src="functions.js"></script>
<script language="javascript" type="text/javascript">

// (c)aractères (a)utorisés
ca_keyword = lettres + digits + "_-";

function verif() {

	var msg;
	var keyword = document.addkw.keyword.value;

	// Présence obligatoire
	if(!keyword) {
		alert("Il faut écrire au moins un mot-clef");
		document.addkw.keyword.focus();
		return false;
	}
	msg = isValidText(keyword,ca_keyword,2,15);
	if(msg != "OK") {
		alert("keyword:\n" + msg);
		document.addkw.keyword.focus()
		return false;
	}
	
	// Présence optionnelle mais testée si présence
	if(keyword) {
		msg = isValidText(keyword,ca_keyword,2,15);
		if(msg != "OK") {
			alert("keyword:\n" + msg);
			document.addkw.keyword.focus()
			return false;
		}
	}

	// autres tests...

	return true; // Tout est vérifié, ça part.
}
</script>


En revanche, dans le cas d'un tableau, à moins de contourner le problème en créant cinq champs de saisie nommés différemment : keyword1, keyword2, keyword3, keyword4, keyword5 et de tester de cette façon ces cinq champs de noms différents, je n'arrive pas (en fait, je ne sais comment faire) à récupérer comme en PHP le tableau des mots-clefs de façon à les tester les uns après les autres dans une boucle dans le genre :
for(var n=0; n<keywords.length; n++) {
	// ... test de keyword[n];
}


comme nom d'input dans le formulaire j'ai essayé
name="keyword[]"
puis
name="keyword[0]"
,
name="keyword[1]"
, ... je n'arrive pas à récupérer dans une variable scalaire javascript un élément de tableau ainsi nommé dans le formulaire. J'ai essayé :
var keywords = document.addkw.keyword.value;

pensant trouver dans la variable
keywords
le tableau des mots-clefs (
keyword[]
)
Echec !

Quelqu'un a-t-il une idée ?

Merci beaucoup


Configuration: Windows / Firefox 52.0


1 réponse

jordane45 Messages postés 38216 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 juin 2024 4 680
7 mai 2020 à 20:41
Bonjour,

regarde ça
<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  
</head>
<body>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>
Keyword : <input type="text" name="keyword[]"><br/>

<input type="button" onclick="test()" value="tester">

  <script type="text/javascript">
  function test(){
    let elements = document.getElementsByName("keyword[]");
    console.log(elements);
     elements.forEach((kw) => {
       console.log(kw.value);
       
     });
  }
  </script>
</body>
</html> 
 

0
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 139
8 mai 2020 à 00:06
Houlà !

Tout d'abord merci ! Mais...
je découvre let,
je découvre console.log(xx),
je découvre xxx.forEach(yy => zz),
je n'utilisais jamais getElementsByName("xx");
J'ai l'impression de devoir tout réapprendre. Ma position était d'utiliser le javascript le plus basique possible pour qu'il puisse être interprété par tous les navigateurs mêmes anciens, genre Netscape. Cela me fait un peu la même impression que les cassettes audio, puis les CD, puis les DVD et maintenant les Blu-ray obligeant à chaque fois de changer son matériel en laissant sur le bord de la route (là je reviens au PC) quantité de gens qui ne peuvent plus visiter certains sites car leur matériel parfois ancien ne supportent pas les nouvelles techniques qui sont malgré tout intéressantes.

Déjà, tu m'a mis dans les mains PDO pour les connexions et requêtes avec la BDD et je me suis dit : ben maintenant, Demerden Sie sich ! J'ai dû refaire tous mes scripts. Maintenant que c'est fait, je pensais souffler un peu et là, tu m'en remets une couche. Remarque c'est bien, je me mets à jour mais j'ai l'impression d'être un dinosaure. Je crois qu'on devient vieux quand on cesse d'apprendre ou qu'on cesse d'en avoir l'envie. Sur ce plan là, malgré mon âge, je me dis que le dinosaure n'est pas encore là. Mais toi, à voir les réponses que tu fais un peu partout sur le site, je me demande si tu dors, de temps en temps...

Quoi qu'il en soit, je vais d'abord digérer ça. Je pense (?) pouvoir récupérer les valeurs et les traiter, je te dirai ça, mais je me pose déjà la question du repositionnement sur l'input ayant généré une erreur comme je faisais avant avec ...focus(); mais chaque chose en son temps. Lorsque j'aurai bien capté l'histoire, je viendrai clore la question mais même si ça n'est pas demain matin à 8h12, ça ne prendra pas des semaines.

Merci pour tes réponses et bonne... nuit, puisqu'il est minuit.
Bye, A+.
0
jordane45 Messages postés 38216 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 juin 2024 4 680 > heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023
8 mai 2020 à 00:22
Je dors assez peu c'est vrai. Mon cerveau n'aime pas être au repos.
Bonne nuit à toi également.
Ps: si tu n'aimes pas la nouvelle façon de faire un foreach, tu peux le faire avec un bon vieux for
0
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 139 > jordane45 Messages postés 38216 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 juin 2024
8 mai 2020 à 13:18
Bonjour,
je n'ai pas à aimer ou ne pas aimer telle ou telle manière de procéder mais je pense avoir à choisir la manière la plus efficace, passe-partout et facilement "digérable". En tout cas, merci pour tout ce que tu nous apprends. Bonne journée. A+
0
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 139 > heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023
8 mai 2020 à 19:54
Re-bonjour,

Après plusieurs essais dû à l'apprentissage, je suis arrivé à ça qui remplit exactement ce que je souhaitais, repositionnement sur l'erreur, y compris. De plus, il n'est pas obligatoire que les mots-clefs saisis se suivent (il peut y avoir un champ vide au milieu) et la nécessité de la saisie d'au moins un mot-clef est vérifiée, même si ce n'est pas le premier champ. Naturellement le
alert("OK");
de vérification est enlevé et le
return false;
qui suit remplacé par
return true;
pour soumettre le formulaire.

Alors un super grand grand merci, pas seulement pour la résolution du problème mais aussi pour m'avoir appris de nouvelles choses.

J'ai le sentiment, parfois, que certains --pas tous, heureusement-- viennent chercher ici leurs réponses et se barrent ensuite --parfois sans merci-- et sans même réaliser le temps que passent les contributeurs à les aider. Qu'ils soient tous ici et à travers toi, puisque c'est toi qui es au bout du clavier, sincèrement remerciés.

A plus tard...

<script type="text/javascript" src="functions.js"></script>
<script language="javascript" type="text/javascript">

// Lists of the classic (c)haracters (a)uthorized (ca_*) in the various input fields
ca_kw = letters + digits + "-_'";

function verif() {

	var n, kw, msg, nbkw;
	let keywords = document.getElementsByName("keyword[]");

	nbkw = 0;
	for(n=0; n<keywords.length; n++) {
		kw = keywords[n].value;
		if(kw) {
			nbkw++;
			msg = isValidText(kw,ca_kw,2,20);
			if(msg != "OK") {
				alert(kw + ":\n" + msg);
				keywords[n].focus();
				return false;
			}
		}
	}

	if(nbkw == 0) {
		alert("At least one keyword");
		keywords[0].focus();
		return false;
	}

	alert("OK");
	return false;
}
</script>


Question résolue.
0
jordane45 Messages postés 38216 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 juin 2024 4 680 > heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023
8 mai 2020 à 21:07
Et bien.. merci pour tes mercis :-)
Je confirme.. certains ne reviennent pas indiquer si leur souci est résolu ou non.
après...je ne fais pas ça pour la gloire. J'ai juste du temps à consacrer pour essayer d'aider lorsque je le peux et parfois ça me permet d'apprendre de nouvelles choses également.
Mais j'avoue.. un merci fait tout de même plaisir.

Bonne soirée.
0