Javascript

Récupérer un formulaire en Javascript

Envoyer un formulaire sans CGI avec mailto - Fonction universelle Javascript

Envoyer les données de vos formulaires sans programme serveur comme le Perl, ASP, PHP etc. En utilisant un simple mailto dans l’action du formulaire et la méthode GET, vous pouvez récupérer les données d’un formulaire dans votre logiciel de messagerie. Les données seront traitées par une fonction Javascript, ce qui permet non seulement d’envoyer les données mais de formater le courriel comme vous le désirez.

ATTENTION: Utilisez ce script en dernier recours que si vous ne pouvez avoir accès à un script serveur. Ce script est particulièrement sensible à la configuration du logiciel de courrier électronique associé au navigateur.

Le script sous Internet Explorer et Netscape 4.7 fonctionne en général asser bien. Mais j’ai constaté une mulitude de problèmes. Pour changer de ligne et ajouter des espace, il faut utiliser des caractères spéciaux. Malheureusement, selon la configuration d’un système, il y a 3 types de caractères spéciaux. J’ai favorisé le plus compatible mais Netscape 6 ne fait pas les sauts de ligne. J’ai cherché à provoquer un en-tête pour régler le problème mais sans succès. Vous pouvez donc chercher à provoquer l’en-tête afin de déterminer le "content-type" du message.

Action="mailto:..."
Vous avez sans doute déjà constaté que l’envoie d’un formulaire avec l’action "mailto:votreAdresse@serveur.com" et la méthode POST se contente d’attacher un fichier qui contient les données. Tandis que la méthode GET perd tout simplement les données. Cette dernière, offre pourtant la possibilité de définir le contenu du courriel à l’aide de la variable BODY! Il faut donc faire une fonction Javascript qui construit cette variable à l’aide des données entrées dans le formulaire juste avant l’envoie du formulaire.

Pour ce faire, il suffit d’ajouter, dans le bouton qui soumet le formulaire "submit", l’appelle de la fonction Javascript:

<input type="submit" name="Submit" value="Soumettre" onClick="construire_body(this.form)">

Quand le visiteur cliquera sur le bouton, la fonction Javascript "construire_body" organisera le corps (body) du courriel qui sera envoyé. Les données du formulaire sont envoyées à la fonction à l’aide de ce paramètre: "this.form".

Deux variables obligatoires
Pour que ce script fonctionne, vous devez créer la variable BODY. Le secret, c’est la variable cachée HIDDEN: BODY. Il existe plusieurs autres variables dites réservées comme "BCC" ou "CC" mais plus importante encore est la variable "SUBJECT" qui permet de définir le sujet du courriel. C’est pourquoi nous allons créer un deuxième champ HIDDEN: SUBJECT.

<input type="hidden" name="Subject" value="">
<input type="hidden" name="Body" value="">

Cest deux variables seront bien interprétées par la méthode GET. Il faut bien comprendre que l’ensemble du contenu du courriel sera dans ses deux variables. Vous pouvez faire la saisie de plusieurs autres données, des champs textes, mémos, listes de sélection simple ou multiple, des mots de passe, des boîtes à cocher ou "radio" et même de champs cachés mais elles devront toutes être capturées et combinées dans la variable HIDDEN: BODY.

La fonction Javascript
La fonction Javascript devra passer tous les éléments du formulaire et extraire le nom de la saisie et la valeur de chacun. De plus, elle convertit les espaces et les sauts de ligne en caractères spéciaux afin d’être bien interprétée dans le courriel. C’est caractères spéciaux sont le "\n" pour un saut de ligne et j’utilise "\t" (tabulation) pour l’espace (la barre oblique indique que le caractère suivant est un caractère spécial).

Sujet, en-tête et signature du courriel
Trois variables à configurer selon vos besoins permettent d’ajouter rapidement le sujet, l’en-tête et la signature au corps du courriel. J’ai aussi ajouté une variable ou un "flag" pour spécifier si vous désirez envoyer les variables HIDDEN. Malgré que je n’en voie pas l’utilité, il me fallait tout de même permettre l’envoi de variables HIDDEN pour ne laisser aucune donnée se perdre lors de l’envoi. C’est dire que, pour utiliser ce script, il vous suffit de spécifier ces trois variables et le tour est joué.

nEntete = "Bonjour,\n\nMerci d’avoir rempli ce formulaire.\n\n";
nPied = "\n\n--------------------\nhttp://www.trucsweb.com";
nSujet = "Test [formulaire]";
nHiddenOk = 1; // Vrais = 1, Faux = 0

Noter le caractère spécial "\n" qui génère le saut de ligne. Si la variable "nHiddenOk" contient 1, Tous les champs HIDDEN seront envoyés incluant BODY et SUBJECT, si elle contient 0, aucun champ HIDDEN ne sera envoyé, à part SUBJECT et BODY.

Code complet

<script type="text/javascript" language="javascript">
<!-- Debut
// ***************************************************
// FONCTION: TW_mailtoBody
// Fonction pour envoyer un formulaire avec MAILTO
// Auteur : Django Blais (Oznog)
// SiteWeb : http://www.trucsweb.com
// Création: 8/19/2001 12:30PM
// Ne pas enlever cette remarque S.V.P.
// ATTENTION *****************************************
// Rien ne garantit la compatibilité de cette fonction
// relative au logiciel de messagerie du visiteur.
// ***************************************************

// Construction de l’en-tête, pied et sujet du formulaire
// NOTE, pour sauter une ligne, utilisez : \n
nEntete = "Bonjour,\n\nMerci d’avoir rempli ce formulaire.\n\n";
nPied = "\n\n--------------------\nhttp://www.trucsweb.com";
nSujet = "Test [formulaire]";

// Mettre "False" pour ne pas envoyer les champs HIDDEN
nHiddenOk = 1; // Vrais = 1, Faux = 0

// Ne rien modifier à partir d’ici
var nRg = / /g;
nSujet = nSujet.replace(nRg,"\t");

function TW_mailtoBody(nForm) {
  nForm.elements["Subject"].value = nSujet;
  nForm.elements["Body"].value = nEntete;
  for (var i = 0; i < nForm.elements.length; i++) {
    if (nForm.elements[i].type == "text" || nForm.elements[i].type == "textarea" || nForm.elements[i].type == "password") {
      nForm.elements["Body"].value = nForm.elements["Body"].value
      + nForm.elements[i].name.toUpperCase() +"\t:\t"
      + nForm.elements[i].value +"\n";
    }
    if (nForm.elements[i].type == "checkbox" || nForm.elements[i].type == "radio") {
      if (nForm.elements[i].checked) {
        nForm.elements["Body"].value = nForm.elements["Body"].value
        + nForm.elements[i].name.toUpperCase() +"\t:\t"
        + nForm.elements[i].value + "\n";
      }
    }
    if (nForm.elements[i].type == "select-one") {
      nForm.elements["Body"].value = nForm.elements["Body"].value
      + nForm.elements[i].name.toUpperCase() +"\t:\t"
      + nForm.elements[i].options[nForm.elements[i].selectedIndex].value + "\n";
    }
    if (nForm.elements[i].type == "select-multiple") {
      nForm.elements["Body"].value = nForm.elements["Body"].value
      + nForm.elements[i].name.toUpperCase() +"\t:\t";
      for (var l = 0; l < nForm.elements[i].options.length; l++) {
        if (nForm.elements[i].options[l].selected) {
          nForm.elements["Body"].value = nForm.elements["Body"].value
          + nForm.elements[i].options[l].value + ",\t";
        }
      }
      nForm.elements["Body"].value = nForm.elements["Body"].value + "\n";
    }
    if (nForm.elements[i].type == "hidden" && nHiddenOk) {
      if (nForm.elements[i].name != "Body" && nForm.elements[i].name != "Subject") {
        nForm.elements["Body"].value = nForm.elements["Body"].value
        + nForm.elements[i].name.toUpperCase() +"\t:\t"
        + nForm.elements[i].value + "\n";
      }
    }
  }
  nForm.elements["Body"].value = nForm.elements["Body"].value + nPied;
  nForm.elements["Body"].value = nForm.elements["Body"].value.replace(nRg,"\t");
}
// Fin -->
</script>

<form action="mailto:adresse@serveur.com" method="get" name="MonForm" enctype="multipart/form-data">
<input type="password" name="Pass" value="" />
<input type="text" name="Nom" value="" />
<input type="text" name="Prenom" value="" />

<input type="checkbox" name="Abonnement" value="Oui" />

<input type="radio" name="Format" value="HTML" checked="checked" />
<input type="radio" name="Format" value="Texte" />

<select name="Bulletin">
<option value="Nouveautés" selected="selected">Nouveauté</option>
<option value="Script gratuit">Script gratuit</option>
<option value="Tutoriels">Tutoriels</option>
</select>

<select name="Aptitudes" multiple="mutiple">
<option value="Sport">Sport</option>
<option value="Informatique">Informatique</option>
<option value="Musique">Musique</option>
</select>

<textarea name="Commentaires" rows="6" cols="50">Commentaires...</textarea>

<!-- Champs HIDDEN obligatoires et sans valeur (pour l’instant) -->
<!-- Corps (BODY) et sujet (SUBJECT) du formulaire. -->
<input type="hidden" name="Subject" value="">
<input type="hidden" name="Body" value="">
<input type="hidden" name="Test" value="Champ Hidden test">

<!-- Capture de l’événement onClick (clic de la souris) -->
<!-- Pour appeler la fonction qui construit le BODY -->
<input type="submit" name="Submit" value="Soumettre" onClick="TW_mailtoBody(this.form)">
<input type="reset" name="reset" value="Rétablir">

</form>