Envoi des données

Création du formulaire

L'envoi du formulaire se fait à l'aide d'un bouton de type submit. Celui-ci agira en fonction de la méthode d'envoi (GET ou POST) et de l'action prévue. Ces deux choix peuvent être indiqués comme attributs de la balise FORM introduisant le formulaire. Elles correspondent aussi à des champs de l'objet JavaScript représentant le formulaire. Nous allons utiliser cette propriété pour effectuer une vérification du contenu du formulaire avant de l'envoyer.

Commençons par créer une page HTML contenant un formulaire permettant de donner un avis sur le cours.

On a utilisé le code HTML suivant.

<HTML>
<HEAD><TITLE>Votre avis</TITLE></HEAD>
<BODY>
<H1>Votre avis sur ce cours</H1><HR>
<FORM NAME="formu" METHOD="post" ENCTYPE="text/plain">
Votre avis : <SELECT NAME="sel">
<OPTION>Ce cours est très bien fait.
<OPTION>Ce cours est bien (sans plus).
<OPTION SELECTED>Ce cours est moyen, et pas assez complet.
<OPTION>Ce cours est très médiocre.
<OPTION>Je n'y reviendrai plus jamais!
</SELECT><BR>
Si vous avez des remarques supplémentaires :<BR>
<TEXTAREA NAME="libre" COLS="35" ROWS="5"></TEXTAREA>
<BR>Votre adresse e-mail : 
<INPUT TYPE="text" NAME="adr" WIDTH="40">
<BR><INPUT TYPE="reset" VALUE="Effacer"> 
<INPUT TYPE="submit" VALUE="Envoyer">
</FORM><HR>
</BODY></HTML>

Dans la balise FORM nous avons indiqué la méthode POST et utilisé l'attribut ENCTYPE pour que le contenu du formulaire soit envoyé sous forme de texte. L'attribut ACTION n'est pas spécifié, son contenu dépendra de la validité du formulaire, qui dépend ici de la forme de l'adresse e-mail fournie.

A la fin du formulaire, deux boutons d'un type nouveau sont utilisés: un bouton RESET qui permet de réinitialiser le formulaire, et un bouton SUBMIT qui déclenche le traitement du formulaire.

Traitement JavaScript

Le traitement JavaScript du formulaire consistera à vérifier que le champ contenant l'adresse e-mail est rempli et qu'il contient bien une expression du type "nom@domaine". Si ce test est positif, on complètera le champ action de l'objet formulaire en utilisant une adresse du type mailto.

Ce traitement sera contenu dans une fonction nommée envoi(). On associera cette fonction à la propriété ONCLICK du bouton SUBMIT en complétant la ligne HTML lui faisant référence.


<INPUT TYPE="submit" VALUE="Envoyer" ONCLICK="envoi();">

La fonction envoi() peut être écrite de la façon suivante :

La dernière ligne permet de définir l'action à exécuter par le bouton SUBMIT. Ici il s'agit d'envoyer le contenu du formulaire par e-mail à l'adresse moi@ici.fr avec comme sujet "Cours JavaScript".

Le résultat obtenu par courrier prend la forme suivante, au moins dans le cas d'une utilisation de Netscape :



Cours JavaScript

De : ..........

À : moi@ici.fr



sel=Ce cours est bien (sans plus).

libre=Pas mal, continuez!

adr=nom@domaine

Retour au menu