4. Traitement de formulaires avec Javascript

4.1 Un simple quiz

Exemple 4-1: Simple quiz avec Javascript

cf. http://tecfa.unige.ch/guides/js/ex-intro/test1.html

Voici le code:

<HTML>
  <HEAD>
    <TITLE>Un simple test avec JavaScript (18-Nov-1997)</TITLE>
    <!-- Created by: D.K.S., 18-Nov-1997 -->
<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:

L'utilisation de "onClick":

Chaque fois que l'utilisateur clique sur un bouton radio, on enregistre la valeur du bouton dans une variable:

<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

Notez que la variable "q1" a été définie préalablement dans le code

L'appel à la fonction du calcul lors du submit:

<input type="button" name="ProcessButton" value="Voir le résultat!"
       onClick="calculer()">

Le calcul:

 function calculer () {
      score = q1 + q2;
      alert("Sur une échelle qui va de 2 à 6 vous avez " + score)
      }

Affichage des résultats

on utilise un simple "alert", ce qui n'est pas très beau.
Voir http://tecfa.unige.ch/guides/js/ex-intro/test2.html !
ou s'inspirer de l'See Création d'une nouvelle fenêtre I

A. Une méthode alternative pour traiter un formulaire

Il n'est pas nécessaire d'enregistrer l'effet de chaque "click", mais on peut aussi avec JS interroger l'état d'un formulaire.
C'est une solution plus difficile à comprendre pour les débutants, mais plus efficace au niveau écriture de code.
Attention: testé avec NS 3/4 uniquement

Exemple 4-2: Interrogation d'un formulaire

Voir: http://tecfa.unige.ch/guides/js/exemples/interactif2.html
à étudier soi-même :)

4.2 Vérification d'un formulaire I

Voir: http://tecfa.unige.ch/guides/js/ex-intro/test1-verif.html

A retenir:

Il y a pleins de façons de faire, voir les sites "WebMaster"
Ici on fait simple, car on a peu de questions:

on initialise au départ les variables q1 et q2 à -1

      var q1 = -1;
      var q2 = -1;

on écrit une fonction qui teste si une de ces variables est encore sous 0

   function verif () {
     if ( (q1 < 0) || (q2 < 0) ) {
       alert ("Il faudrait remplir tous les champs SVP !");
       return false;
     }
     else return true;
}

notez que cette fonction retourne false si c'est le cas et true si tout va bien.
Ensuite, la fonction calculer appelle tout d'abord cette fonction verif. Si verif retourn false on sort, sinon on continue .....

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

... le reste est pareil

4.3 Vérification d'un formulaire (II)

Exemple 4-3: Vérification d'un formulaire

http://tecfa.unige.ch/guides/js/ex-intro/form-control.html

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.

Beaucoup de sites utilisent JS pour vérifier un formulaire avant de l'envoyer à un CGI pour traitement.

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:

La fonction checkBlank ne détecte pas si l'utilisateur a utilise un espace blanc dans sa réponse.
L'See Vérification d'un formulaire permet de parer à cette éventualité.

<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)

Cf. http://tecfa.unige.ch/guides/js/ex-intro/form-control2.html
La fonction checkForm appelle la fonction checkBlank qui vérifie deux choses:

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