Cr�er un formulaire

**hyena_** · 06/07/2018, 14h13

Bonjour,

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

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

Je vous remercie d'avance

Invit� · 06/07/2018, 17h23

Bonjour,

1- pour commencer :

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

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

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 :

**bonjourajax** · 07/07/2018, 02h51

Envoy� par hyena_

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**Watilin** · 08/07/2018, 15h37

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.

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function ok() {
  "use strict";
 
  let a = f.T1.value;
  ...
 
}

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

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;
}

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

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;
}

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.

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.

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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;
}

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.

**hyena_** · 08/07/2018, 23h10

Merci beaucoup pour ton aide

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

Cr�er un formulaire

JavaScript

Discussions similaires

Partager

Partager