Formats, verifies and recover the contents of HTML forms : Form Info « Form Control




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>



  <HEAD>

    <TITLE>JsLib 1.3 - Exemple - forms.js</TITLE>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

    <META NAME="Author" CONTENT="Etienne CHEVILLARD">

    <!-- forms.js -->

    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">

/* forms.js

 * Role : formate, controle et recupere le contenu des formulaires

 * Projet : JsLib

 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)

 * Version : 1.3

 * Creation : 02/05/2001

 * Mise a jour : 23/02/2005

 */



// --- Variables globales ---



// variables pour les parametres de l'URL

var forms_cle;

var forms_val;



// recupere les parametres de l'URL

if (window.location.search && (window.location.search.indexOf("=")>1)) {

  var fpar=(window.location.search.substring(1, window.location.search.length)).split("&");

  forms_cle=new Array(fpar.length);

  forms_val=new Array(fpar.length);

  for (var i=0; i<fpar.length; i++) {

    forms_cle[i]=fpar[i].substring(0, fpar[i].indexOf("="));

    forms_cle[i]=unescape((forms_cle[i].split("+")).join(" "));

    forms_val[i]=fpar[i].substring(fpar[i].indexOf("=")+1, fpar[i].length);

    forms_val[i]=unescape((forms_val[i].split("+")).join(" "));

  }

}



// --- Fonctions ---



// supprime les espaces qui commencent ou qui terminent la chaine specifiee

function forms_suppEsp(chaine) {

  var fdeb;

  var ffin;

  fdeb=chaine;

  ffin=chaine;

  for(var i=0; ((i<fdeb.length) && (fdeb.charAt(i)==' ')); i++) {

    ffin=ffin.substring(1, ffin.length);

  }

  fdeb=ffin;

  for(var i=fdeb.length-1; ((i>=0) && (fdeb.charAt(i)==' ')); i--)

    ffin=ffin.substring(0, ffin.length-1);

  return (ffin);

} // fin forms_suppEsp(chaine)



// verifie que le formulaire specifie est rempli puis l'expedie

function envoyerFormulaire(formulaire) {

  for (var i=0; i<formulaire.elements.length; i++) {

    if (formulaire.elements[i].type.substring(0, 4)=="sele") {

      if (!verifierPresence(formulaire.elements[i].options[formulaire.elements[i].selectedIndex].value)) {

        alert("Veuillez choisir une valeur dans la liste \""+formulaire.elements[i].name+"\".");

        formulaire.elements[i].focus();

        return false;

      }

    }

    if (formulaire.elements[i].type.substring(0, 4)=="text") {

      if (!verifierPresence(formulaire.elements[i].value)) {

        alert("Veuillez saisir une valeur dans le champ \""+formulaire.elements[i].name+"\".");

        formulaire.elements[i].focus();

        return false;

      }

    }

  }

  formulaire.submit();

  return true;

} // fin envoyerFormulaire(formulaire)



// formate le contenu d'un champ de formulaire de type "Email"

function formaterChampEmail(champ) {

  var femail;

  femail=champ.value;

  femail=femail.split('<').join('');

  femail=femail.split('>').join('');

  femail=femail.split('"').join('');

  femail=femail.split(' ').join('');

  champ.value=femail;

  return true;

} // fin formaterChampEmail(champ)



// formate le contenu d'un champ de formulaire de type "Nom"

function formaterChampNom(champ) {

  var fnom;

  var fpos;

  fnom=forms_suppEsp(champ.value);

  for(var i=0; i<fnom.length-1; i++) {

    while ((fnom.charAt(i)==' ') && (fnom.charAt(i+1)==' ')) {

      fnom=fnom.substring(0, i)

        +fnom.substring(i+1, fnom.length);

    }

  }

  fnom=fnom.substring(0, 1).toUpperCase()

    +fnom.substring(1, fnom.length).toLowerCase();

  for(var i=0; i<fnom.length-1; i++) {

    if ((fnom.charAt(i)=='-') || (fnom.charAt(i)==' ')) {

      fnom=fnom.substring(0, i)+fnom.charAt(i)

       +fnom.substring(i+1, i+2).toUpperCase()

       +fnom.substring(i+2, fnom.length);

    }

  }

  champ.value=fnom;

  return true;

} // fin formaterChampNom(champ)



// formate les parametres contenus dans l'URL de la page

function formaterParametres() {

  if (!window.location.search) { return ""; }

  var ftxt="<TABLE SUMMARY='parametres'>";

  for (var i=0; i<forms_cle.length; i++) {

    ftxt+="<TR><TD VALIGN='TOP'><B>" + forms_cle[i] + " :</B></TD>";

    ftxt+="<TD VALIGN='TOP'>" + forms_val[i] + "</TD></TR>";

  }

  ftxt+="</TABLE>";

  return (ftxt);

} // fin formaterParametres()



// retourne le nombre de parametres contenus dans l'URL de la page

function nombreParametres() {

  if (window.location.search && (window.location.search.indexOf("=")>1)) {

    return (forms_cle.length);

  } else {

    return (0);

  }

} // fin nombreParametres()



// retourne la valeur du parametre correspondant a la cle indiquee

function valeurParametre(cle) {

  if (window.location.search) {

    for (var i=0; i<forms_cle.length; i++) {

      if (forms_cle[i]==forms_suppEsp(cle)) return (forms_val[i]);

    }

  }

  return ("");

} // fin valeurParametre(cle)



// verifie que l'adresse e-mail specifiee est valide

function verifierEmail(email) {

  var fadr;

  var fnom;

  var farob;

  var fdom;

  var fpoint;

  var fext;

  if (!verifierPresence(email)) { return false; }

  fadr=forms_suppEsp(email);

  farob=fadr.lastIndexOf("@");

  if (farob!=fadr.indexOf("@")) { return false; }

  fnom=fadr.substring(0, farob);

  if (fnom.length<1) { return false; }

  fpoint=fadr.lastIndexOf(".");

  if (fpoint<farob) { return false; }

  fext=fadr.substring(fpoint+1, fadr.length);

  if (fext.length<2) { return false; }

  fdom=fadr.substring(farob+1, fpoint);

  if (fdom.length<2) { return false; }

  return true;

} // fin verifierEmail(email)



// verifie que la chaine specifiee n'est pas vide

function verifierPresence(chaine) {

  if (forms_suppEsp(chaine).length>0) { return true; }

  else { return false; }

} // fin verifierPresence(chaine)



    </SCRIPT>

  </HEAD>



  <BODY>

    <H1>JsLib 1.3</H1>

    <HR>

    <H2>Exemple - forms.js</H2>



    <NOSCRIPT>

      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne

      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la

      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>

      <HR>

    </NOSCRIPT>



    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">

      document.write("<P>Nombre de param&egrave;tres dans l'URL : " + nombreParametres() + "<P>");

      if (nombreParametres() > 0) { document.write(formaterParametres()); }

    </SCRIPT>



    <HR>



    <P>Utilisez ce formulaire pour v&eacute;rifier la validit&eacute; d'une adresse e-mail :

      <FORM ACTION="GET" NAME="f1" onSubmit="return false">

        Adresse e-mail &agrave; v&eacute;rifier :<BR>

        <INPUT NAME="Adresse" TYPE="TEXT" SIZE=40 onBlur="formaterChampEmail(this)">

        <INPUT NAME="Verifier" TYPE="BUTTON" VALUE="V&eacute;rifier"

        onClick="if (verifierEmail(document.f1.Adresse.value)) alert('Adresse e-mail valide.')

          else alert('Adresse e-mail non valide.')">

      </FORM>



    <HR>

    

    <P>Utilisez ce formulaire pour simuler l'envoi d'un courrier &eacute;lectronique :

      <FORM ACTION="GET" NAME="f2" METHOD="GET">

      

      <TABLE SUMMARY="formulaire" BORDER=0 CELLSPACING=5 CELLPADDING=5>

        <TR><TD>

          Votre nom :

        </TD><TD>

          <INPUT NAME="Nom" TYPE="TEXT" SIZE=40 onBlur="formaterChampNom(this)">

        </TD></TR><TR><TD>

          Votre adresse e-mail :

        </TD><TD>

          <INPUT NAME="Email" TYPE="TEXT" SIZE=40 onBlur="formaterChampEmail(this)">

        </TD></TR><TR><TD>

          Sujet du courrier :

        </TD><TD>

          <INPUT NAME="Sujet" TYPE="TEXT" SIZE=60>

        </TD></TR><TR><TD>

          Contenu :

        </TD><TD>

          <TEXTAREA NAME="Contenu" COLS=50 ROWS=10></TEXTAREA>

        </TD></TR><TR><TD>

          Votre opinion sur JsLib ?<BR>

        </TD><TD>

          <INPUT TYPE="radio" NAME="Opinion" VALUE="Excellent"> Excellent<BR>

          <INPUT TYPE="radio" NAME="Opinion" VALUE="Pas mal" CHECKED> Pas mal<BR>

          <INPUT TYPE="radio" NAME="Opinion" VALUE="Nul"> Nul

        </TD></TR><TR><TD>

          Connaissance du site :<BR>

        </TD><TD>

          <SELECT NAME="Connaissance du site" SIZE="1">

            <OPTION VALUE="" SELECTED>--- Faites un choix ---</OPTION>

            <OPTION VALUE="Moteur de recherche">Moteur de recherche</OPTION>

            <OPTION VALUE="Bouche &agrave; oreilles">Bouche &agrave; oreilles</OPTION>

            <OPTION VALUE="Article de presse">Article de presse</OPTION>

          </SELECT>

        </TD></TR><TR><TD>

          Remarque :

        </TD><TD>

          <INPUT TYPE="checkbox" NAME="Remarque" VALUE="Souhaite une r&eacute;ponse rapide">

          Je souhaite une r&eacute;ponse rapide.<BR>

        </TD></TR><TR><TD>

        </TD><TD>

          <INPUT NAME="Envoyer" TYPE="BUTTON" VALUE="Envoyer" onClick="envoyerFormulaire(document.f2)">

          <INPUT NAME="Annuler" TYPE="RESET" VALUE="Effacer">

        </TD></TR>

      </TABLE>

      

      </FORM>



  </BODY>

</HTML>
Formats, verifies and recover the contents of HTML forms : Form Info « Form Control « JavaScript DHTML
