Statistiques| Inscription| Espace privé
Développement Web
Accueil > Javascript > vérification et cookie
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Juillet 2019   >>
Lu Ma Me Je Ve Sa Di
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4



Un formulaire qui vérifie et enregistre les valeurs dans un cookie.
Dans cette rubrique, on apprend :
- à vérifier que tous les champs d’un formulaire sont remplis,
- à écrire un cookie,
- à lire un cookie pour en récupérer les informations.
 
 
 
 
Un formulaire qui vérifie et enregistre les valeurs dans un cookie.
Dans cette rubrique, on apprend :
- à vérifier que tous les champs d’un formulaire sont remplis,
- à écrire un cookie,
- à lire un cookie pour en récupérer les informations.
HTML, CSS et but.
 
 
 
 

On considère le code html du formulaire que l’on avait "décoré" grâce à une feuille de style externe au précédent chapitre.

Afin de pouvoir accéder aux objets associés aux divers champs du formulaire, on va lui octroyer un attribut id avec pour valeur "formulairewebdev". Ainsi le code html reste identique, à part la ligne <form action="" > qui devient <form action="" id="formulairewebdev"> et on ne procède à aucun changement quant à la feuille de style.

Le but du code javascript qui suit, est :

- de vérifier que tous les champs sont remplis,

- de faire la synthèse de ces valeurs dans une fenêtre d’alerte,

- d’inscrire les choix dans un cookie dont la durée de vie est celle de votre navigateur,

- d’initialiser les valeurs par défaut avec celles stockées dans le cookie.

 
 
 
 
 
Le code javascript
 
 
 
 

// Au chargement de la page.
window.onload=initialisation;

function initialisation() {
debut();
document.getElementById("enregistrer").onclick=function(){verif()};
}

// Cette fonction vérifie que tous les champs ont été saisis.
// Si tel est le cas, on écrit les choix dans un cookie et dans une fenêtre récapitulative.
function verif(){
var formObj=document.getElementById("formulairewebdev");
var ok=true;

for (i=0;i<formObj.length;i++){
// on enlève le select qui pose problème avec internet explorer (i!=5)
if ((formObj.elements[i].value=="")&&(i!=5)){

// Une fenêtre d'alerte vous prévient qu'il faut remplir tous les champs et donne le focus au champ vide.
alert("Tous les champs doivent être remplis");
formObj.elements[i].focus();
ok=false;
 return;}
}
if (ok==true) {
loisirpref=formObj.loisir.options[formObj.loisir.selectedIndex].text;
if (formObj.genre[0].checked) mongenre=formObj.genre[0].value;
if (formObj.genre[1].checked) mongenre=formObj.genre[1].value;

var textlan="\n* vous parlez : ";
if (formObj.francais.checked==true) textlan+=" français";
if (formObj.anglais.checked==true) textlan+=" anglais";
if (formObj.allemand.checked==true) textlan+=" allemand";
if (formObj.espagnol.checked==true) textlan+=" espagnol";


meschoix="Les données que vous avez saisies sont les suivantes : \n* votre nom : "
+ formObj.nom.value+"\n* votre prénom : "+ formObj.prenom.value+"\n* votre mot de passe : "
+ formObj.secret.value+"\n* votre genre : "+mongenre +"\n* votre loisir préféré : "
+loisirpref +textlan +"\n* votre texte : "+formObj.projet.value;

definircookie("meschoix",meschoix);

alert(meschoix+"\n Elles ont été stockées dans un cookie.");
}
}

// javascript stocke les cookies au format suivant "nomcookie1=valeur1; nomcookie2=valeur2; nomcookie3=valeur3"
//Comme son nom l'indique, cette fonction permet d'écrire un cookie...

function definircookie(nom, valeur){
// La fonction escape permet de transformer le texte de façon à ne pas avoir de problème avec un événtuel ; qui indiquerait la fin du cookie.
document.cookie= nom + "="+escape(valeur);
}

//Comme son nom l'indique...
 function lireCookie(nom){
 var resultat=null;
 var monCookie =" "+document.cookie+";";
// Maintenant on a le format " nomcookie1=valeur1; nomcookie2=valeur2; nomcookie3=valeur3;"
 var nomRecherche =" "+nom+ "=";
// La méthode indexOff renvoie le numéro correspondant à la position du nomRecherche dans la chaîne  monCookie
 var debutDuCookie=monCookie.indexOf(nomRecherche);
 var finDuCookie;
 if (debutDuCookie!=-1) {
 // On obtient le numéro du caractère situé juste après "nomrecherche="
 debutDuCookie += nomRecherche.length;
  // On récupère le numéro du premier caractère ";" en commençant la recherche à debutDuCookie
 finDuCookie = monCookie.indexOf(";",debutDuCookie);
 //La fonction substring extrait la chaîne de caractères située entre le caratère d'indice debutDuCookie et le caratère d'indice est finDuCookie.  
 resultat=unescape(monCookie.substring(debutDuCookie,finDuCookie));
}
return resultat;
}

//On récupère le cookie meschoix et suivant le nom, on en extrait l'option correspondante
function lireOption(nom){
 var resultat=null;
// Le cookie meschoix stocke les informations au format suivant "* monchoix1 : valeur1 * momchoix2 : valeur2 * monchoix3 : valeur3"
 var maChaine =lireCookie("meschoix")+"*";
// maintenant on a le format "* monchoix1 : valeur1 * momchoix2 : valeur2 * monchoix3 : valeur3 *"
 var nomRecherche ="* "+nom+ " : ";
// La méthode indexOff renvoie le numéro correspondant à la position du nomRecherche dans la chaîne  machaine
 var debutDeOption=maChaine.indexOf(nomRecherche);
 var finDeOption;
 if (debutDeOption!=-1) {
 // On obtient le numéro du caractère situé juste après "nomrecherche :"
 debutDeOption += nomRecherche.length;
  // On récupère le numéro du premier caractère "*" en commençant la recherche à debutDeOption
 finDeOption = maChaine.indexOf("*",debutDeOption);
 //La fonction substring extrait la chaîne de caractères située entre le caratère d'indice debutDeOption et le caractère d'indice est finDeOption.  
 resultat=maChaine.substring(debutDeOption,finDeOption);
}
return resultat;
}

// Les options stockées dans le cookie meschoix.
function debut(){
cooknom=lireOption("votre nom");
if (cooknom==null) { document.getElementById("formulairewebdev").nom.value=""; }
else { document.getElementById("formulairewebdev").nom.value=cooknom;}
cookprenom=lireOption("votre prénom");
if (cookprenom==null) { document.getElementById("formulairewebdev").prenom.value=""; }
else { document.getElementById("formulairewebdev").prenom.value=cookprenom;}
cooksecret=lireOption("votre mot de passe");
if (cooksecret==null) { document.getElementById("formulairewebdev").secret.value=""; }
else { document.getElementById("formulairewebdev").secret.value=cooksecret;}


if (lireOption("votre genre")=="un homme") {
document.getElementById("formulairewebdev").genre[1].checked=true;}
else { document.getElementById("formulairewebdev").genre[0].checked=true;}
if (lireOption("votre loisir préféré")=="informatique"){
document.getElementById("formulairewebdev").loisir.options[0].selected=true;}
if (lireOption("votre loisir préféré")=="sport"){
document.getElementById("formulairewebdev").loisir.options[1].selected=true;}
if (lireOption("votre loisir préféré")=="cinéma"){
document.getElementById("formulairewebdev").loisir.options[2].selected=true;}
if (lireOption("votre loisir préféré")=="musique"){
document.getElementById("formulairewebdev").loisir.options[3].selected=true;}

var meslangues=lireOption("vous parlez");

if (meslangues!=null){
if (meslangues.indexOf("français")!=-1){
document.getElementById("formulairewebdev").francais.checked=true;}
else {
document.getElementById("formulairewebdev").francais.checked=false;}

if (meslangues.indexOf("anglais")!=-1){
document.getElementById("formulairewebdev").anglais.checked=true;}
else {
document.getElementById("formulairewebdev").anglais.checked=false;}

if (meslangues.indexOf("allemand")!=-1){
document.getElementById("formulairewebdev").allemand.checked=true;}
else {
document.getElementById("formulairewebdev").allemand.checked=false;}

if (meslangues.indexOf("espagnol")!=-1){
document.getElementById("formulairewebdev").espagnol.checked=true;}
else {
document.getElementById("formulairewebdev").espagnol.checked=false;}
}

cookprojet=lireOption("votre texte");
if (cookprojet==null) { document.getElementById("formulairewebdev").projet.value=""; }
else { document.getElementById("formulairewebdev").projet.value=cookprojet;}

}

 
 
 
 
 
Le formulaire