UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  6. Traitement de formulaires avec Javascript

6. Traitement de formulaires avec Javascript

6.1 Un simple quiz

A. Solution style "grand-mère"

Exemple 6-1: Simple quiz avec Javascript

 

Voici le code:

<HTML>  <HEAD>    <TITLE>Un simple test avec JavaScript (18-Nov-1997)</TITLE>   <script language="JavaScript">     // Initialisation de variables      var q1 = 1;      var q2 = 1;    // calcul      function calculer () {      score = q1 + q2;      alert("Sur une échelle qui va de 2 à 6 vous avez " + score)      }</script>
</HEAD>  <BODY>    <H1>Un simple test avec JavaScript</H1>Cette page montre comment faire un simple test avec Javascript.Remplissez le formulaire suivant SVP: <P>
<hr><form>Quelles sont vos connaissances de HTML ?<input type="radio" name="choice" value="1" onClick="q1=1" checked>faibles<input type="radio" name="choice" value="2" onClick="q1=2">moyennes<input type="radio" name="choice" value="3" onClick="q1=3">bonnes<br>Indiquez votre expertise en programmation:<input type="radio" name="choice2" value="1" onClick="q2=1" checked>absente<input type="radio" name="choice2" value="2" onClick="q2=2">moyenne<input type="radio" name="choice2" value="3" onClick="q2=3">bonne<P><input type="button" name="ProcessButton" value="Voir le résultat!"       onClick="calculer()"></form><hr></HTML>

A retenir:

<input type="radio" name="choice" value="1" onClick="q1=1" checked>faibles<input type="radio" name="choice" value="2" onClick="q1=2">moyennes<input type="radio" name="choice" value="3" onClick="q1=3">bonnes
<input type="button" name="ProcessButton" value="Voir le résultat!" onClick="calculer()">
 function calculer () {      score = q1 + q2;      alert("Sur une échelle qui va de 2 à 6 vous avez " + score)      }

B. Traitement de formulaire style "DOM ancien"

 

Chaque élément de la page correspond à un objet qui s’insère dans un arbre hiérarchique. " les boutons radio réponse1 sont dans le formulaire questions qui se trouve dans le document par défaut".

On nomme l’objet en écrivant sa hiérarchie :

Voici quelques exemples pour accéder à des propriétés ou à des méthodes :

document.question.submit();
elements = document.questions.length;

Exemple 6-2: Traitement du formulaire II : interrogation des valeurs

Voici la fonction displayScore modifiée et commentée:

  function displayScore () {
    document.questions.submit.checked = false;
 
    // on déclare la variable score et on initialise à 0
    var score = 0;
 
    // on regarde combien d’éléments il y a dans le formulaire
    elements = document.questions.length;
 
    // on fait ensuite un boucle sur le nombre d’éléments pour les passer en revue un par un.
    var i;
    for (i = 0; i < elements; i++) {
      // on regarde si l’élément est "checked". Si oui, on calcule le score
      if (document.questions.elements[i].checked) {

score = score + eval(document.questions.elements[i].value);
      }
    }
    // feedback
    ...

Exemple 6-3: Interrogation d’un formulaire (autre exemple)

C. Traitement de formulaire style DOM W3C

Voici une manière de faire assez moderne:

Code HTML:

<form id="quiz" action="#" method="get">
<input type="submit" value="Voir le résultat!" /> </form>

Code JavaScript:

// Ceci associe la fonction init à l'événement charger la page
// Quand cela charge, le navigateur va chercher la fonction et l'exécuter
window.onload = init;
 
// Cette fonction associe une éventhandler function "doit" à l'évévenement
// où l'utilisateur soumet la forme
 
function init () {
  document.getElementById("quiz").onsubmit = doit;
}

Voir les slides sur DOM et JS:

6.2 Vérification d’un formulaire I

A retenir:

var q1 = -1;var q2 = -1;
   function verif () {     if ( (q1 < 0) || (q2 < 0) ) {       alert ("Il faudrait remplir tous les champs SVP !");       return false;     }     else return true;}
   function calculer () {     // Si verif retourn false on quitte le navire     if (!verif()) return ;     // sinon on continue     score = q1 + q2;     alert("Sur une échelle qui va de 2 à 6 vous avez " + score) ;}

6.3 Vérification d’un formulaire (II)

Exemple 6-4: Vérification d’un formulaire

Cet exemple reprend le formulaire discuté dans le module "Les formulaires HTML" et y ajoute deux fonctions Javascript permettant de vérifier que l'utilisateur n'a pas laissé de champs vides.

 

 

A remarquer:

  • Le bouton qui permet d'envoyer le contenu du formulaire est différent de l'exemple «Envoyer le contenu d’un formulaire avec email» [p. 21]:
    • Lorsque l'utilisateur clique sur le bouton “envoi” la fonction 'checkForm' est appelée avec le contenu du formulaire en argument: checkForm(this.form)

AVANT

      <input type="submit" value="Envoi">

APRES (avec vérification):

      <input type="button" value="Envoi"              onClick="checkForm(this.form)">
  • La fonction “checkForm” appelle la fonction “checkBlank”, qui vérifie:
    • (1) est-ce que les champs en question ont une valeur (est-ce que l'utilisateur a tapé quelque chose).
    • Si la question (1) reçoit une reponse positive, alors la fonction checkBlank retourne la valeur true qui signifie dans notre cas, 'tout est en ordre'.
    • Dès lors le test dans la fonction checkForm est satisfait et l'appel form.submit() envoie le contenu du formulaire.
  • A faire mieux:
 
 

 

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">function checkBlank(input,msg){  if (input.value == null || input.value.length == 0) {    alert ("Il faut remplir les champs Nom et Email");    return false;  }  return true;}function checkForm(form){  if (      !checkBlank(form.nom) ||      !checkBlank(form.email)) {    return false;  }  form.submit();    alert ("Merci pour votre reponse ...");  return true;}</SCRIPT>
</HEAD><BODY><h1>Vérification de formulaire avec Javascript</h1>
<form enctype="application/x-www-form-urlencoded"   action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>Votre Nom <input type="text" name="nom" size=15> <p>Votre email <input type="text" name="email" size=15> <p>Votre commentaire <textarea name="comment" rows=5 cols=30></textarea><p><input type="button" value="Envoi" onClick="checkForm(this.form)"><input type="reset" value="Effacer"></form></BODY></HTML>

A. Vérification d’un formulaire (III)

1) est ce que les champs en question ont une valeur (est-ce que l'utilisateur a tapé quelque chose).

2) Est-ce que les champs sont remplis par autre chose que des espaces ?

Si les questions 1) et 2) ont une reponse positive alors la fonction “checkBlank” retourne la valeur true qui signifie dans notre cas, 'tout est en ordre'. Dès lors le test dans la fonction chekForm est satisfait et l'appel form.submit() envoie le contenu du formulaire.

Voici la fonction checkBlank modifiée:

(voir la source de la page HTML ci-dessus pour l’ensemble)

function checkBlank(input,msg){   if (input.value == null || input.value.length == 0) {    alert ("Il faut remplir les champs Nom et Email");    return false;  }    var str = input.value;  for (var i = 0; i < str.length ;i++){    var ch = str.substring(i,i+1);    if ( ch == " ") {      alert (msg );          return false;    }  }  return true;}

UPPREVIOUS NEXT -- TIE