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.

// 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;}

}