Créer un formulaire

Version imprimable

Créer un formulaire

Bonjour,

Je début avec JavaScript et j'ai un peu de peine avec l'exercice suivant:

Citation:

Il vous faudra créer un champ, ou seuls les chiffres seront autorisés.
Proche de ce champ devra se trouver une phrase qui devra s'adapter en fonction de la valeur entrée dans le champ*:
*
1. S’il n'y a pas de chiffre dans le champ:
«*Insérer un chiffre dans le champ*» (le texte doit être noir)
*
2. Si le chiffre est inférieur à 100 :
«*Il vous reste XX pour atteindre la valeur témoin*» (le texte doit être rouge)
(XX doit représenter la valeur manquante pour atteindre le chiffre 100)
*
3. Si le chiffre est supérieur à 100 :
«*Valeur témoin dépassée*» (le texte doit être vert)

Mon code HTML ressemble à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Champ</title> </head> <body> <form method="POST" name="f" onsubmit=" ok() "> <p><input type="text" name"T1" size"20"></p> <p><input type="submit" value"Envoyer" name="B1"><input type="reset" value="Rétablir" name="B2"></p> </form> <script src="java.js"></script> </body> </html>
Et ma partie Java script à ça:
Code:

1 2 3 4 function ok() {a=f.T1.value; if (a=="") }
Je vous remercie d'avance

06/07/2018, 17h23
Invité
Bonjour,

1- pour commencer :

Citation:

Si le chiffre est inférieur à 100...
Si le chiffre est supérieur à 100...

tu expliqueras à ton prof que (sémantiquement, hors synecdoque) :
- les "chiffres" vont de 0 à 9
- quant aux autres, on les appelle des "nombres" (composés de plusieurs chiffres !).
Donc l'énoncé est erroné. :aie:

2- si c'est vraiment TOUT ce que tu as réussi à pondre,... il te reste un loooooooooooooong chemin........ :calim2:

3- pour bien débuter :
- 3a- on ne parle pas de "formulaire", mais juste d'un champ
- 3b- "où seuls les chiffres seront autorisés" : voir <input type="number" />
- 3c- le test doit se lancer quand on tape des chiffres dans l'input : <input type="number" onkeyup="test(this.value);"/>,
  (voir "Référence des événements : onkeyup, onblur, onchange...")
- 3d- l'affichage résultat doit se faire dans un <div id="result-test"></div>, par exemple
Bon. J'en ai assez dit, non ?

Sinon :
- Les meilleurs cours et tutoriels pour apprendre le JavaScript
- FAQ JavaScript
07/07/2018, 02h51
bonjourajax
Citation:
Envoyé par hyena_

Code:

1 2 3 4 function ok() {a=f.T1.value; if (a=="") }

Je vous remercie d'avance
La c'est bien mais tu fais quoi apres
c'est ou que tu peines?
Code:

1 2 3 4 5 6 7 8 9 function ok() {a=f.T1.value; // si le champ est vide if (a=="") { ... } }

Malheureusement l’éducation est un vieux mammouth, et c’est d’autant plus vrai dans les domaines informatiques, où rien ne pousse une enseignante ou un enseignant à plein temps à faire de la veille, et à se tenir au courant des dernières bonnes pratiques.

:arrow: De loin la plus importante d’entre elles, le mode strict de JavaScript élimine certaines incohérences du langage, et ainsi le rend plus facile à apprendre, et donc aussi plus facile à enseigner. Parles-en à ton prof, il ne peut pas rester dans l’ignorance, ni transmettre cette ignorance à ses élèves actuels et futurs.

Entre autres, le mode strict oblige à déclarer ses variables pour aider à structurer son code et à ne pas polluer la portée globale. Pour ça, on utilise le mot-clé let :
Code:

1 2 3 4 5 6 7 function ok() { "use strict"; let a = f.T1.value; ... }
:arrow: L’attribut onsubmit… Il y a plus propre, mais on va se contenter de ça pour le moment. Problème : pour l’instant la fonction n’empêche pas la page de se recharger quand le formulaire est soumis ; du coup le script n’a pas le temps d’agir.

Pour prévenir la soumission du formulaire, l’attribut doit renvoyer la valeur booléenne false. Une pratique courante est de renvoyer le résultat de la fonction, ce qui permet de choisir au sein de la fonction si on renvoie false ou pas.
Dans ton cas tu n’as jamais besoin d’autoriser la soumission du formulaire, tu peux donc renvoyer false systématiquement.

Code:

<form method="post" name="f" onsubmit="return ok()">
Code:

1 2 3 4 5 6 7 function ok() { "use strict"; ... return false; }
On peut aussi prendre la bonne habitude de passer la variable spéciale event qui contient des tas d’informations utiles :

Code:

<form method="post" name="f" onsubmit="return ok(event)">
Code:

1 2 3 4 5 6 7 8 function ok(event) { "use strict"; console.log(event); ... return false; }
Appuie sur F12 dans ton navigateur et sélectionne le panneau « console » pour voir les messages envoyés avec console.log.

En particulier, l’objet event a une propriété event.target qui référence le formulaire. Ça rend la fonction plus dynamique car elle marchera toujours si on change le nom du formulaire.
Et à vrai dire, ce nom de formulaire est un problème, car il est automatiquement ajouté à la portée des variables globales. Ça crée un risque de collision de noms. Il vaut mieux ne pas nommer le formulaire, et utiliser uniquement event.target.

Code:

<form method="post" onsubmit="return ok(event)">
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ok(event) { "use strict"; console.log(event); let leForm = event.target; let a = leForm.T1.value; ... return false; }
:arrow: Comme l’a suggéré jreaux62, l’input pourrait être de type "number". Ainsi, le navigateur fait une partie du travail à ta place : il rejette tout seul les valeurs qui ne sont pas des nombres.

En ce qui concerne le script, la propriété value des inputs est toujours de type string. Il vaut mieux la convertir en number dès que possible, ce n’est pas obligatoire mais ça permet d’éviter les mauvaises surprises.
Code:

1 2 <form method="post" onsubmit="return ok(event)"> <p><input type="number" name="T1" size="20" /></p>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ok(event) { "use strict"; console.log(event); let leForm = event.target; let a = Number(leForm.T1.value); ... return false; }
:arrow: jreaux62 te conseille d’utiliser l’évènement keyup. C’est une solution alternative à submit, qui produit un comportement différent. Les deux ne sont pas compatibles, tu dois choisir l’une ou l’autre. À toi de voir quel comportement tu préfères.

:arrow: Le bouton reset — plusieurs études ont montré qu’en termes d’ergonomie, il était souvent néfaste, car il crée un risque de supprimer accidentellement toutes les données. Quand le formulaire est long, ça peut être très décourageant pour l’utilisatrice ou l’utilisateur. Regarde le Web actuel : est-ce qu’on voit souvent ce bouton sur les sites de tous les jours ? Il y a des situations où il est pertinent de le mettre, mais il faut bien y réfléchir.

:arrow: Je prends les devants car quelqu’un ne manquera pas (si ce n’est pas déjà fait) de te suggérer d’utiliser innerHTML. C’est une solution de facilité, ce n’est pas efficace. À terme, tu créeras des applications plus performantes si tu apprends à utiliser les méthodes du DOM telles que createElement et append. Voici un exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function ok(event) { "use strict"; console.log(event); let leForm = event.target; let a = Number(leForm.T1.value); let pElem = document.createElement("p"); pElem.append("évènement submit détecté"); leForm.append(pElem); return false; }
:arrow: Je suis étonné que personne n’ait encore réagi au nom du fichier java.js. JavaScript n’est pas Java. Même s’il ne s’agit que du nom d’un fichier et que ce n’est pas important, moi ça me dérange un peu.

08/07/2018, 23h10
hyena_

Merci beaucoup pour ton aide :D

Oui je portais pas trop d'importance au nom de mon fichier haha