JavaScript pour les formulaires

Très souvent du code JS est associé à un formulaire HTML.
Ainsi dans le cadre d'un traitement JS il est plus ergonomique que les entrées-sorties soient effectuées via un formulaire plutôt qu'avec instructions basées sur les fonctions prompt(), alert()
Dans le cadre d'un formulaire de soumission (qui adresse des données vers une autre page en vue d'un traitement côté serveur) il faut souvent compléter le contrôle HTML des saisies par un script afin que le contrôle "côté navigateur" soit complet.
Le traitement PHP des données soumissionnées n'est pas l'objet de ce chapitre.
Mon tuto sur PHP

Dans ce chapitre vous découvrirez de nombreuses astuces pour que le code JS associé à un formulaire HTML soit clair et fiable. L'utilisation d'un JS moderne est privilégiée.

Les expressions régulières sont simplement évoquées dans ce chapitre.
Pour comprendre leur construction suivez le lien : les regExp

Formulaires simples

J'entends par "simples" des formulaires qui ne sont pas des formulaires de soumission. Le formulaire sert seulement à gérer de façon ergonomique des entrées et sorties.
Dans de tels formulaires les attributs action & method de la balise FORM sont absents et le bouton d'envoi est de type "button" pour appeler un script JS qui effectue un traitement et affiche le résultat dans un élément OUPUT du même formulaire.

Premier exemple : la concaténation

Thème: l'utilisateur saisit un nom puis un prénom et la concaténation des deux termes est réalisée et affichée. Puis le focus est rendu au champ pour "nom".

dans le premier champ on doit saisir un nom
dans le deuxième champ on doit saisir le prénom
dans un troisième champ (en lecture seule) doit s'afficher le nom et le prénom concaténés

Il faut aussi un bouton de commande pour appeler le script (sur clic).
Il faut aussi des légendes pour guider l'utilisateur.

Le code CSS et HTML

...
<style>
	input:valid {color : green ; }
	input:invalid {color : red ;}	
...
<form  name ="f" >
	<br><input type ="text" required  pattern ="^[A-Z' ]{2,20}$"  placeholder ="saisir votre nom en MAJ" name ="nom">
	<br><input type ="text" required  pattern ="^[a-zéè' ]{2,20}$"  placeholder ="saisir votre prénom en min" name ="prenom">
	<br><button type ="button"  name ="bouton">Concaténez</button>
	<br><label>Nom et prénom : </label><output name ="nom_prenom"</output>
</form>
...

Notez les attributs pattern ayant pour valeur une expression régulière.

Notez l'élément OUTPUT qui reçoit le résultat du traitement.

Le script

Il est très simple.

f.bouton.onclick = function () 
{
	f.nom_prenom.value = f.nom.value +" "+ f.prenom.value ;
	f.nom.focus(); // activer le premier champ du formulaire
}

Pour accéder en JS, à un élément de formulaire, j'ai utilisé une technique aussi ancienne que le JavaScript (mais toujours valide) reposant sur la syntaxe : nomFormulaire.nomChamp
Cela suppose que le formulaire et les contrôles du formulaire soient nommés (emploi de l'attribut "name").

Le rendu dans un Iframe de "concatenation.htm"

Saisissez le nom en minuscules et le prénom en majuscules, les saisies apparaissent en rouge mais vous pouvez quand valider ces données ...

Le contrôle de saisie HTML (grâce aux attributs pattern & required) n'est pas ici bloquant car le bouton d'envoi n'est pas de type 'submit'.

Deuxième exemple : puissance carré d'un nombre entier ou décimal

Nous saisissons un nombre (entier ou décimal) dans un champ.
Suite à un clic sur le bouton de commande, le carré ce nombre s'affiche dans un deuxième champ du formulaire.

Le code HTML

...
<form name ="f">
	<input type = 'number'  name ="nombre"  step ="any" placeholder ="Saisir un entier ou un décimal">
	<br><button type = 'button' name ="bouton">Calculez le carré de ce nombre !</button>
	<br><label>Carré du nombre  :</label><output name ="carre"></output>
</form>
...

Le premier INPUT est de type "number" (type de champ introduit par la spécification HTML5). Il est impossible de saisir du texte dans un input type number.
Le carré du nombre saisi s'affiche dans un champ output qui est forcément en lecture seule.
Comme j'ai rajouté l'attribut step ="any" je peux saisir un décimal via le clavier. Je rappelle que le séparateur décimal est en principe le point même si certains navigateurs tolèrent la virgule ...

Le script

f.bouton.onclick =function()
{	
	var vnombre = f.nombre.value;
	f.carre.value = vnombre * vnombre;
}

Le script ne présente aucune difficulté.

Le rendu dans un Iframe

Saisissez par clavier 5.5 puis 5,5.
À chaque fois vous obtenez comme résultat 30.25

Troisième exemple

Dans les deux exemples précédents l'ergonomie des formulaires est perfectible. Pour afficher un nouveau résultat il faut resaisir et appuyer de nouveau sur le bouton de commande.
Dans l'exemple qui suit le bouton de commande a disparu ; toute saisie opère de façon instantanée un traitement et l'affichage du nouveau résultat.
C'est possible grâce à l'utilisation de l'évènement input.

Le rendu

Déplacez les curseurs et observez ...

Le code correspondant

<form oninput="resultat.value=parseInt(premier.value)+ parseInt(deuxieme.value)" 
	style ="width : 60wv ; margin : auto ; border : 1px solid black ; font-size : 1.2em; ">
  <p><input type="range" name="premier" value="50" min = '0' max = '100' step = '5' 
	onchange ="premier2.value = this.value"  />
  <output name="premier2"></output>
  <p><label>+</label>
  <p><input type="range" name="deuxieme" value="50" min = '0' max = '100' step = '5'
	onchange ="deuxieme2.value =this.value"/>
  <output name="deuxieme2" ></output>
  <p><label>= </label>
  <p><output name="resultat"></output>
</form>

saisie via des input type = range
affichage du résultat dans un élément output
nouvel attribut évènementiel : onInput
notez l'emploi du mot clé this

L'événement "input" se déclenche à chaque modification du contenu d'un élément INPUT ou TEXTAREA.
Il est impossible de lire la saisie effectuée via un "input range" aussi il est associé à chaque "input range" un output qui affiche clairement la valeur saisie.

Un troisième OUTPUT nommé "resultat" récupère le résultat de l'addition des valeurs des champs "range" :
form oninput="resultat.value=parseInt(premier.value)+ parseInt(deuxieme.value)"

Des applications HTML5 & JS

En combinant dans un document HTML un formulaire HTML5, du CSS et un script en JS, il est possible de réaliser des applications web.

Calculette en ligne
Boite à couleurs

JavaScript et les formulaires de soumission

Je vais maintenant évoquer l'emploi de JavaScript dans le cadre d'un formulaire de soumission. C'est à dire un formulaire qui permet d'envoyer des données dans une autre page en vue d'un traitement avec un langage côté serveur (PHP, JAVA, Python, etc.).

On reconnait un formulaire de soumission facilement : les attributs action & method de l'élément FORM sont obligatoires. De plus le bouton de commande doit être de type "submit".
Dans ce type de formulaire avant toute tentative de soumission des données il faut procéder à un contrôle de saisie "côté client" appelé aussi contrôle "navigateur. Il est en effet préférable que les données soumissionnées soient valides pour éviter leur rejet par le serveur et donc une nouvelle requête HTTP ...

Vous êtes en droit de penser que grâce à toutes les nouveautés apportées par HTML5 & CSS3 on peut parfaitement effectuer un contrôle de saisie "côté client" uniquement via le HTML. Mais en fait un contrôle uniquement via le HTML a ses limites ...

Thématique : inscription à un site

Pour vous inscrire sur un site coquin (lol) vous devez saisir en guise d'identifiant votre adresse mail et la confirmer puis choisir un mot de passe et le confirmer.
Le mot de passe doit contenir entre 6 et 8 caractères alphanumériques c'est à dire des lettres non accentuées et des chiffres. Les autres caractères sont bannis.
Nous envisageons successivement plusieurs solutions concernant le contrôle de saisie "côté client".

Mauvaise solution : uniquement du code HTML

Le contrôle de saisie se fera uniquement grâce à l'emploi des nouveaux types de champs (email, number) et des nouveaux attributs (required & pattern) de la norme HTML 5.

Le code

...
<form action = "inscription_trait.htm" target ="_blank"  method ='post'>
<p>Vous devez saisir votre adresse mail en guise d'identifiant et choisir un mot de passe.
<br>Le mot de passe est composé de lettres non accentuées et de chiffres ; entre 6 et 8 caractères</p>
    <label>Tapez votre adresse mail : </label>	
	<input type = "email" required placeholder = "n'oubliez pas @" 
			name ='mail1'>
	 <label>Confirmez votre adresse mail : </label>	
	<input type = "email" required name ='mail2'>
	<label>Saisissez mot de passe :</label>
	<input type = "password"  required  pattern ='^[A-z0-9]{6,8}$'
		placeholder = 'entre 6 et 8 lettres ou chiffres' name ='passe1'>
	<label>Confirmer le mot de passe : </label>
	<input type = "password" required  pattern = '^[A-z0-9]{6,8}$'  
		 name ='passe2'>
    <label></label><button type = 'submit'> inscription</button>
</form>
...

Les données sont envoyées avec la méthode POST. En cas de succès de la soumission : accès à la page "inscription_trait.htm".
Cette page cible réserve quelques surprises agréables ...(réservé aux adultes, lol).

Dans un formulaire de soumission les attributs action & method de l'élément FORM sont obligatoires.
L'attribut target est souhaitable (afficher la page cible dans un nouvel onglet).
Le bouton d'envoi doit être de type "submit" afin que les contrôles HTML (via les attributs type, pattern & required soient bloquants : empêche la soumission si les saisies ne respectent pas les regExp.

Ici le formulaire comprend quatre champs de saisie dont deux de type "email" et deux de type "password".
Un champ de type "email" oblige la saisie d'une chaine comprenant le caractère "@" donc impose un certain gabarit.

L'attribut pattern associé au type "text" ou "password" impose aussi un gabarit. Ainsi pour les champs "password" seuls sont autorisés les lettres (majuscules et minuscules) non accentuées et au maximum 8 caractères.
Ainsi si vous saisissez plus de 8 caractère le texte saisi rebascule en rouge et toute tentative de soumission est bloquée.

Tests

dupont@free.fr
dupont@free.fr
sesame62
sesame62

Bravo! vous accéder à la page "inscription_trait.htm". Donc vous avez soumissionné avec succès.

dupont@free.fr
dipont@freee.fr
sesame62
srsame59

Vous accédez quand même à la page "inscription_trait.htm" alors que les deux adresses mail sont valides mais différentes ET que les deux mots de passe sont valides mais différents.
Vous découvrez à cette occasion les limites d'un contrôle "côté client" qui se limite à un contrôle via le code HTML.

Si vous devez comparer le contenu de deux champs, HTML ne vous est d'aucun secours puisque la notion de test est étrangère à ce langage. Il faut alors compléter le contrôle HTML par un script afin d'obtenir un contrôle "côté client" complet.

Bonne solution

Le contrôle "côté client" (ou contrôle "navigateur") est double : via HTML et JS.

La méthode "e.preventDefault()"

Par défaut lorsque vous cliquez sur un bouton de type "submit", vous adressez les données saisies vers le fichier précisé dans l'attribut "action" (et à condition que les contrôles HTML soient vérifiés).
La méthode preventDefault() appliquée à l'objet "event" permet d'annuler le comportement par défaut du navigateur donc ici annule la soumission.

Le code du formulaire (extrait)

...
	<form name ="f" action ="inscription_trait.htm" method ="post">
	...
	<button type ="submit">Inscription</button>
</form>
<h3 id ="message"></h2>
...

Le code HTML est identique à la version précédente sauf le rajout d'un élément H3 identifié "message".

Le script

Il est rédigé en JS moderne : séparation stricte entre le HTML et le JavaScript.

...
var message = document.querySelector('#message') ; 
document.querySelector('form').onsubmit = function(event) 
// sur soumission du formulaire appel d'une fonction anonyme
{
  if (f.mail1.value == f.mail2.value && f.passe1.value == f.passe2.value)
  {	message.textContent = "Saisie correcte ! " ; }
  
  else
  {
    event.preventDefault(); // annulation de la soumission
    message.textContent = "Erreurs de saisie !" ; 
  }
} // fin fonction anonyme
...

Appel de la fonction anonyme JS : document.querySelector('form').onsubmit = function(event) :
La fonction (anonyme) JS est appelée si appui sur le bouton de soumission.

Que fait cette fonction ?
Si le test est vérifié affichage d'un message : "saisie correcte" puis envoi des données au serveur sinon envoi bloquée ET affichage d'un message d'erreur.

Ici j'ai désigné l'objet événement par "event" mais j'aurais pu utiliser le mot "e" ou "evenement" ou "evt" ...

Tests

Vous pouvez refaire les mêmes tests que lors de la version précédente : saisies égales mais ne correspondant pas aux gabarits, saisies correspondant aux patterns mais inégales et enfin saisies égales et correspondant aux gabarits. C'est seulement dans le dernier cas que l'envoi est effectif.

Afficher /masquer le mot de passe

Désormais sur beaucoup de sites, la saisie dans un champ "mot de passe" peut être affichée ; un script modifie en effet le type du champ INPUT qui passe de "password" à "text" ou vice-versa.

Thème : connexion à un site par identifiant et mot de passe.

Le code HTML

<form name ="f">
	<label>Tapez votre identifiant : </label>	
		<input type = "email"  name ="identifiant" required>
	<label>Saisissez  le mot de passe :</label>
		<input type = "password"  required name ='motdepasse'> 
		<img src ="../images/oeil.png" style ="height : 50px; width : auto;"  title ="afficher le mot de passe" 
			onclick ="f_oeil()">	
</form>

Une image représentant un oeil (facile à trouver sur la toile) est affichée à côté du champ de type "password".
Une légende est associée à l'image.
Si clic sur cette image appel : d'une fonction.

Le script

Il est d'un simplicité déroutante.

function f_oeil()
{
	if (f.motdepasse.getAttribute('type')=='password') 
		{f.motdepasse.setAttribute('type','text'); }
	else
		{f.motdepasse.setAttribute('type','password'); }
}

Si le champ "motdepasse" est de type "password" alors il devient de type "text". Sinon c'est l'inverse.

Le rendu

Formulaire comprenant des champs masqués

Le visiteur (du site) qui remplit un formulaire peut adresser à son insu des informations au site. En effet un formulaire peut comprendre des champs masqués au visiteur. Ces champs doivent être remplis via l'attribut "value" OU par un script.

Thème : en se connectant à son espace le visiteur communique à son insu la largeur et la hauteur de l'écran du terminal qu'il utilise. Ainsi un script PHP récupère ce genre d'informations.

Le code HTML

<form name ="f" action = "cible.php"  method ='post' >
	<label>Tapez votre identifiant : </label>	
	<input type = "email"  name ="identifiant" required>
	<label>Saisissez  le mot de passe :</label>
	<input type = "password"  required name ='motdepasse' 
	pattern ='[A-z0-9]{6,8}' placeholder = 'entre 6 et 8 lettres ou chiffres' > 
	<input type ="hidden" value ="Largeur et hauteur de la fenêtre" name ="legende">
	<input type ="hidden"  name ="masque1" >
	<input type ="hidden"  name ="masque2" >
	<button type ="submit">Connexion</button>
</form>

Les données renseignées sont transmises à la page "cible.php" avec la méthode POST.
Remarquez les trois champs masqués (input type ="hidden").

Le script

document.querySelector('form').onsubmit = function() 
{
 	f.masque1.value = screen.width; 
	f.masque2.value = screen.height; 
} // fin fonction anonyme

La page "cible.php"

Pour information je vous communique un extrait de la page cible : "cible.php".
Il s'agit d'un script PHP qui se contente d'afficher les données soumissionnées. ... <?php echo "identifiant est : " .$_POST['identifiant']. "<br>"; echo "mot de passe est : " .$_POST['motdepasse']. "<br>"; echo $_POST['legende']. "<br>"; echo "largeur écran est : " .$_POST['masque1']. "<br>"; echo "hauteur écran est : " .$_POST['masque2']. "<br>"; ? >

Le rendu

Les autres contrôles

Dans un formulaire il n'y a pas que des champs et des boutons de commande.

boutons radio
cases à cocher
listes à choix unique
listes à choix multiple

Exemple

un groupe de bouton radio
une liste à choix unique
un groupe de cases à cocher
une liste à choix multiple

Le code du formulaire

...
<form name ="f"  action ="autres_controles.php" method ="post" style ="width : 80%; margin: auto; border : 2px solid black;">
	<p>Quelle est votre genre ? </p>
    <input type="radio" name="sexe" value="Monsieur"/>Masculin <br>
    <input type="radio" name="sexe" value="Madame" checked />Féminin<br>
	
	<p>Votre tranche d'âge ? </p>
	<select name = 'age'> 
		<option value = 't1'>Moins de 20 ans </option>
		<option value = 't2'>Entre 20 et 40 ans </option>
		<option value = 't3'>Entre 40 et 60 ans  </option>
		<option value = 't4'>Plus de 60 ans </option>
	</select>
 
	<p>Jeux de société pratiqués</p>
	<input type="checkbox" name="jeux[]" value="échec" class ='cases' >Echec <br>
	<input type="checkbox" name="jeux[]" value="bridge" class ='cases'>Bridge<br>
	<input type="checkbox" name="jeux[]" value="tarot" class ='cases'>Tarot <br>
	<input type="checkbox" name="jeux[]" value="belote" class ='cases'>Belote <br>
	<input type="checkbox" name="jeux[]" value="autres" class ='cases'>Autre <br>
	<input type="checkbox" name="jeux[]" value="aucun" class ='cases' checked>Aucun <br>

	
	<p>Sports pratiqués ?  </p>
	<select name = 'sports[]' multiple"> 
		<option value = 'foot' class ="multiple">Football</option>
		<option value = 'nata'class ="multiple">Natation</option>
		<option value = 'vélo' class ="multiple">Vélo</option>
		<option value = 'tennis'class ="multiple">tennis</option>
		<option value = 'autre' class ="multiple">Autre sport</option>
		<option value = 'aucun' class ="multiple" selected >Aucun sport</option>
	</select>
	<br><button type ="button" name ="js" >Traitement JS ! </button>
	<button type ="submit" name ="php" >Traitement PHP ! </button>
</form>

<h3 id ="resultat"></h3>
...

C'est en vue du traitement PHP que le groupe de cases cocher et la liste à choix multiples portent le nom d'un tableau de valeurs : jeux[] & sports[].

Toutes les cases à cocher bénéficient de la classe "cases" et tous les items de la liste à choix multiples sont affectés de la classe "multiple".
Aucune mise en forme n'est associée à ces deux classes (pas de règle de style) ; elles ont uniquement pour but de faciliter le traitement JS.

Le script

f.js.onclick = function () 
{
	// création de deux array
	var contenu = "Genre : " + f.sexe.value + "
 " ; 
	var sports = document.querySelectorAll('.multiple'); 
	// création d'un tableau indicé
	contenu += "Tranche d'age : " + f.age.value + "
" ; 
	contenu+= "jeux pratiqués : " ; 
	var jeux = document.querySelectorAll('.cases'); 
	// création d'un tableau indicé
	for (var jeu of jeux)
		{if (jeu.checked) {contenu += jeu.value + " " ; } }
	contenu+= "
 sports pratiqués : "; 
	
	// parcours du deuxième array
	for (var sport of sports) 
		{if (sport.selected) {contenu += sport.value + " " ; } }
		
	document.getElementById("resultat").innerHTML = contenu; 
...

Pour un groupe de boutons radio et une liste à choix unique le traitement JS est simple puisqu'il n'y a qu'une seule valeur saisie (on ne peut cocher qu'un bouton OU sélectionner un seul item de la liste).

Par contre pour un groupe de cases à cocher et une liste à choix multiple c'est un peu plus compliqué.
Il faut créer deux 'arrays' : un à partir des cases affectés de la classe "cases" et un autre à partir des items de liste affectés de la classe "multiple".
Il faut ensuite parcourir chaque 'array' avec une boucle.

Le rendu du document dans un Iframe

Après avoir bien renseigné le formulaire, cliquez sur le bouton "traitement JS" puis sur le bouton "traitement PHP".
Le resultat du traitement JS s'affiche sous le formulaire alors que le résultat du traitement PHP s'affiche dans la page : "autres_controles.php".

Le traitement PHP

Pour info je vous communique le traitement PHP dans la page cible. <h3> <?php echo "Votre genre : " . $_POST['sexe'] . "<br>"; echo "Votre tranche d'âge : " . $_POST['age'] . "<br>"; echo "Vos jeux de société pratiqués : " ."<br>"; foreach($_POST['jeux'] as $jeu) {echo $jeu . "<br>";} echo "Les sports que vous pratiquez : " . "<br>"; foreach($_POST['sports'] as $sport) {echo $sport . "<br>";} ?> </h3>

Activer / désactiver des contrôles "disabled"

Dans un formulaire certains champs peuvent être désactivés ("disabled") par défaut.

Code d'un document HTML

Le code du formulaire

Dans chaque groupe de cases il faut préciser le jeu / le sport si vous avez coché "autre". ... <form name ="form1" style ="width : 80%; margin: auto;" oninput ="f1()"> <h4>Jeux de société pratiqués ?</h4> <p><input type="checkbox" name="jeux[]" value="aucun" class ='cases1'>Aucun <br><input type="checkbox" name="jeux[]" value="échec" class ='cases1' >Echec <br><input type="checkbox" name="jeux[]" value="bridge" class ='cases1'>Bridge <br><input type="checkbox" name="jeux[]" value="tarot" class ='cases1'>Tarot <br><input type="checkbox" name="jeux[]" value="belote" class ='cases1'>Belote <br><input type="checkbox" name="jeux[]" value="autres" class ='cases1'>Autre à préciser <br><label>Précisez ! </label><input type ="text" name ="precision1" disabled /> <h4>Sports pratiqués ? </h4> <p><input type="checkbox" name="sports[]" value="aucun" class ='cases2'>Aucun <br> <br><input type="checkbox" name="sport[]" value="échec" class ='cases2' >Football <br> <br><input type="checkbox" name="sport[]" value="bridge" class ='cases2'>cyclisme<br> <br><input type="checkbox" name="sport[]" value="tarot" class ='cases2'>Natation<br> <br><input type="checkbox" name="sport[]" value="belote" class ='cases2'>Course<br> <br><input type="checkbox" name="sports[]" value="autres" class ='cases2'>Autre à préciser <br> <br><label>Précisez ! </label><input type ="text" name ="precision2" disabled > </form>

Notez oninput ="f1()"
Les attributs name des cases à cocher n'ont d'utilité que dans le cadre d'un éventuel traitement PHP.
Comme dans l'exemple précédent les classes "cases1" et "cases2" ne servent pas à styliser mais à créer des groupes logiques.
Notez que les zones de texte sont "disabled" (désactivées) : on ne peut pas les sélectionner pour y saisir un texte.

Le code de la fonction JS

function f1()
{
	var jeux = document.querySelectorAll('.cases1'); 
	var sports = document.querySelectorAll('.cases2'); 
	
	if (jeux[5].checked) form1.precision1.disabled = false 
	else form1.precision1.disabled = true;  
	if (sports[5].checked) form1.precision2.disabled = false
	else form1.precision2.disabled = true;  

} // fin f1

var jeux = document.querySelectorAll('.cases1') : création d'un 'array' correspondant à toutes les cases affectées de la classe "cases1".

Si dans chaque 'array' l'élément d'indice 5 est coché alors la zone de texte associée est activée (disabled = false). Sinon elle est désactivée (disabled = true).

Le rendu

Utilisez la nouvelle méthode de détection des évènements

Reprenons le thème du formulaire avec des éléments OUTPUT et sans bouton de commande grâce à l'évènement input.
Je vous montre ci-dessous comment écrire le code dans l'esprit du JS moderne.

Le code du formulaire

<form name ="f1"  style ="width : 60wv ; margin : 10px auto ; font-size : 1.1em; ">
  <p><input type="range" name="premier" value="50" min = '0' max = '100' step = '5' >
  <output name="premier2"></output>
  <p><label>+</label>
  <p><input type="range" name="deuxieme" value="50" min = '0' max = '100' step = '5' >
  <output name="deuxieme2" ></output>
  <p><label>= </label>
  <p><output name="resultat"></output>
  <h3></h3>
</form>

Remarquez que le formulaire et les champs ont un nom, notez ceux des éléments OUTPUT.
Notez la balise H3 qui est vide.

Le script en JS moderne

f1.addEventListener('input',function() 
	{f1.resultat.value=parseInt(f1.premier.value)+ parseInt(f1.deuxieme.value);}); 
f1.premier.addEventListener('change',function()
	{f1.premier2.value = this.value;}); 
f1.deuxieme.addEventListener('change',function() 
	{f1.deuxieme2.value = this.value;}); 
message = document.querySelector('h3'); 
f1.addEventListener('input',function(event)
	{message.innerHTML = "évènement : " + event.type; });

Quatre fonctions anonymes.
Comme les formules de calcul sont en dehors du formulaire, il faut utiliser dans celles-ci le nom complet de chaque champ : nomFormulaire.nomChamp.

La méthode addEventListener() offre de nombreux avantages par rapport à la méthode ancienne de détection des évènements en JS (méthode "onevent").
En particulier il peut y avoir par exemple, plusieurs fonctions ciblant l'élément "f1" sur l'évènement "input" (ici 2). On peut passer en argument de la fonction un objet de type "event" qui retourne des infos sur l'évènement et permet même de modifier l'apparence de la cible.

Pour en savoir plus sur la gestion des évènements en JS

Traduction

Tutoriel sur Javascript

JavaScript : les bases

Framework historique : jQuery

Framework de nouvelle génération : Vue.js

Node.js : JavaScript 'côté serveur'

Recherche dans ce tuto

L'auteur : Patrick Darcheville

JavaScript pour les formulaires

Formulaires simples

Premier exemple : la concaténation

Le code CSS et HTML

Le script

Le rendu dans un Iframe de "concatenation.htm"

Deuxième exemple : puissance carré d'un nombre entier ou décimal

Le code HTML

Le script

Le rendu dans un Iframe

Troisième exemple

Le rendu

Le code correspondant

Des applications HTML5 & JS

JavaScript et les formulaires de soumission

Thématique : inscription à un site

Mauvaise solution : uniquement du code HTML

Le code

Tests

Bonne solution

La méthode "e.preventDefault()"

Le code du formulaire (extrait)

Le script

Tests

Afficher /masquer le mot de passe

Le code HTML

Le script

Le rendu

Formulaire comprenant des champs masqués

Le code HTML

Le script

La page "cible.php"

Le rendu

Les autres contrôles

Exemple

Le code du formulaire

Le script

Le rendu du document dans un Iframe

Le traitement PHP

Activer / désactiver des contrôles "disabled"

Code d'un document HTML

Le code du formulaire

Le code de la fonction JS

Le rendu

Utilisez la nouvelle méthode de détection des évènements

Le code du formulaire

Le script en JS moderne