JavaScript DHTML/Form Control/Form Info

Содержание

1 Access an item in a collection
2 Count forms in a document
3 Formats, verifies and recover the contents of HTML forms
4 Get form element infomation

Access an item in a collection

<html>
<body>
    <form id="Form1" name="Form1">
        Form1: <input type="text">
    </form>
    
    <form id="Form2" name="Form2">
        Form2: <input type="text">
    </form>
    <p>
    You can use the form"s number:
    </p>
<script type="text/javascript">
    
    document.write("<p>The first form"s name is: ")
    document.write(document.forms[0].name + "</p>")
    document.write("<p>The second form"s name is: ")
    document.write(document.forms[1].name + "</p>")
    
</script>
<p><b>Or, the form"s name:</b></p>
<script type="text/javascript">
    document.write("<p>The first form"s name is: ")
    document.write(document.getElementById("Form1").name + "</p>")
    document.write("<p>The second form"s name is: ")
    document.write(document.getElementById("Form2").name + "</p>")
</script>
</body>
</html>

Count forms in a document

<html>
<body>
    <form name="Form1">
        Name: <input type="text" size="20">
    </form>
    <form name="Form2">
        Age: <input type="text" size="3">
    </form>
<script type="text/javascript">
    txt="This document contains: " + document.forms.length + " forms."
    document.write(txt)
</script>
</body>
</html>

Formats, verifies and recover the contents of HTML forms

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

Get form element infomation

<html>
<head>
<script language="JavaScript">
<!--
function showElements(f) {
  var formElements = "";
  for (var n=0; n < f.elements.length; n++) {
      formElements += n + ":" + f.elements[n] + "\n";
  }
  alert("The elements in the form "" + f.name + "" are:\n\n" + formElements);
}
//-->
</script>
</head>
<body>
<form name="ExampleForm">
<table border=0>
<tr>
 <td>
  <input name="cb1" type="checkbox" checked>Option 1<br>
  <input name="cb2" type="checkbox">Option 2
 </td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" size=45 name="fullname"></td>
</tr>
<tr>
 <td>Address:</td>
 <td><textarea name="ta"></textarea></td>
</tr>
<tr>
 <td>
  <input type="button" value="See elements" onClick="showElements(this.form)">
 </td>
</tr>
</form>
</table>
</body>
</html>

JavaScript DHTML/Form Control/Form Info

Содержание

Access an item in a collection

Count forms in a document

Formats, verifies and recover the contents of HTML forms

Get form element infomation

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты