JavaScript DHTML/Form Control/Form Info
Содержание
Access an item in a collection
<source lang="html4strict">
<html> <body>
<form id="Form1" name="Form1">
Form1: <input type="text">
</form>
<form id="Form2" name="Form2">
Form2: <input type="text">
</form>
You can use the form"s number:
<script type="text/javascript">
document.write("The first form"s name is: ") document.write(document.forms[0].name + "
") document.write("The second form"s name is: ") document.write(document.forms[1].name + "
")</script>
Or, the form"s name:
<script type="text/javascript">
document.write("The first form"s name is: ") document.write(document.getElementById("Form1").name + "
") document.write("The second form"s name is: ") document.write(document.getElementById("Form2").name + "
")</script> </body> </html>
</source>
Count forms in a document
<source lang="html4strict">
<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>
</source>
Formats, verifies and recover the contents of HTML forms
<source lang="html4strict">
<!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"> <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="| " + forms_cle[i] + " : | "; ftxt+="" + forms_val[i] + " |
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>
JsLib 1.3
Exemple - forms.js
<NOSCRIPT>
Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la configuration dans les préférences/options de votre navigateur.
</NOSCRIPT>
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
document.write("<P>Nombre de paramètres dans l"URL : " + nombreParametres() + "<P>");
if (nombreParametres() > 0) { document.write(formaterParametres()); }
</SCRIPT>
<P>Utilisez ce formulaire pour vérifier la validité d"une adresse e-mail :
<FORM ACTION="GET" NAME="f1" onSubmit="return false">
Adresse e-mail à vérifier :
<INPUT NAME="Adresse" TYPE="TEXT" SIZE=40 onBlur="formaterChampEmail(this)">
<INPUT NAME="Verifier" TYPE="BUTTON" VALUE="Vérifier"
onClick="if (verifierEmail(document.f1.Adresse.value)) alert("Adresse e-mail valide.")
else alert("Adresse e-mail non valide.")">
</FORM>
<P>Utilisez ce formulaire pour simuler l"envoi d"un courrier électronique :
<FORM ACTION="GET" NAME="f2" METHOD="GET">
Votre nom : |
<INPUT NAME="Nom" TYPE="TEXT" SIZE=40 onBlur="formaterChampNom(this)"> |
Votre adresse e-mail : |
<INPUT NAME="Email" TYPE="TEXT" SIZE=40 onBlur="formaterChampEmail(this)"> |
Sujet du courrier : |
<INPUT NAME="Sujet" TYPE="TEXT" SIZE=60> |
Contenu : |
<TEXTAREA NAME="Contenu" COLS=50 ROWS=10></TEXTAREA> |
Votre opinion sur JsLib ? |
<INPUT TYPE="radio" NAME="Opinion" VALUE="Excellent"> Excellent |
Connaissance du site : |
<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 à oreilles">Bouche à oreilles</OPTION>
<OPTION VALUE="Article de presse">Article de presse</OPTION>
</SELECT>
|
Remarque : |
<INPUT TYPE="checkbox" NAME="Remarque" VALUE="Souhaite une réponse rapide">
Je souhaite une réponse rapide.
|
<INPUT NAME="Envoyer" TYPE="BUTTON" VALUE="Envoyer" onClick="envoyerFormulaire(document.f2)">
<INPUT NAME="Annuler" TYPE="RESET" VALUE="Effacer">
|
</FORM> </BODY>
</HTML>
</source>
Get form element infomation
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> </head> <body> <form name="ExampleForm">
<input name="cb1" type="checkbox" checked>Option 1 |
|
| Name: | <input type="text" size=45 name="fullname"> |
| Address: | <textarea name="ta"></textarea> |
<input type="button" value="See elements" onClick="showElements(this.form)"> |
</body> </html>
