Traitement d'un formulaire en JS

Retour au menu Le présent chapitre se présente comme un exemple complet et commenté de traitement des divers composants d'un formulaire.
Conseils :

Etudier d'abord le codage de la partie <BODY> définissant l'interface graphique, en liaison avec son exécution figurant ci-dessous.
Pour chaque composant, étudier le code JavaScript qui permet de récupérer les données du formulaire pour un traitement spécifique.

Code du formulaire

<HTML>
<HEAD>
<META NAME="Author" CONTENT="Jean Gourdin, lycée Jacques Feyder, Epinay-sur-Seine">
<META NAME="Description" CONTENT="option info 97/98">

<SCRIPT LANGUAGE="JavaScript1.1"> 
 var hauteur=300;
 var largeur=300;
 options="width="+largeur+",height="+hauteur+"toolbar=yes, 
 directories=no, menubar=no,scrollbars=yes,status=yes";

function traiter_info(formulaire) {
w =open("","Fiche_de_renseignements",options); 
nom=formulaire.Nom.value;
prenom=formulaire.Prenom.value;
motpass=formulaire.secret.value;
discipline=formulaire.disciplines.options[formulaire.disciplines.selectedIndex].text;
for (i=0;i<formulaire.specialites.length;i++) {
  if (formulaire.specialites[i].checked) 
  specialite=formulaire.specialites[i].value;
}
w.document.write("<font size=+1><u><center>Fiche de renseignements</center></u></font><p>");
w.document.write("Votre nom : ", nom,"<br>");
w.document.write("Votre prénom : ", prenom,"<br>");
w.document.write("Votre mot de passe : ", motpass,"<P>");
w.document.write("Votre spécialité de TS : ", specialite,"<br>");
w.document.write("Votre discipline  favorite : ",discipline,"<P>");
w.document.write("Vous êtes inscrit(e) en : <UL>");
if  (formulaire.deug.checked)  w.document.write("<LI>"+formulaire.deug.value+"<br>");
if  (formulaire.cpge.checked)  w.document.write("<LI>"+formulaire.cpge.value+"<br>");
if  (formulaire.iut.checked)  w.document.write("<LI>"+formulaire.iut.value+"<br>");
if  (formulaire.bts.checked)  w.document.write("<LI>"+formulaire.bts.value+"<br>");
if  (formulaire.autre.checked)  w.document.write("<LI>"+formulaire.autre.value+"<br>");
w.document.write("</ul>");
w.document.write("<br>");
}

function fermer(){
w.close();
}
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#c0c0c0"    TEXT="#000000" 
      LINK="#0000A0"   VLINK="#009000"  ALINK="#FF00FF">
<H1>Fiche d'inscription</H1>

<FORM  NAME="Fiche">
Nom : <INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : <INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe :  <INPUT TYPE="password" NAME="secret" SIZE=5>
<P>
Vous êtes en terminale S à dominante : 
<INPUT TYPE="radio" NAME="specialites" VALUE="Math" checked>Mathématiques
<INPUT TYPE="radio" NAME="specialites" VALUE="PC">Physique-chimie
<INPUT TYPE="radio" NAME="specialites" VALUE="SVT">SVT
<P>
Quelle est votre discipline préférée ? 
<SELECT NAME="disciplines"  SIZE=3>
  <OPTION>Physique
  <OPTION SELECTED>Informatique 
  <OPTION>Philosophie
  <OPTION>Mathématiques
  <OPTION>Langues
  <OPTION>SVT
  <OPTION>Histoire 
  <OPTION>EPS
</SELECT>
<P>
Vous vous êtes inscrit(e)s en :<BR>  
<INPUT TYPE=CHECKBOX CHECKED NAME="deug" value="Deug 1ère année">Deug 1ère année
<INPUT TYPE=CHECKBOX NAME="cpge"  value="Classe préparatoire">Classe préparatoire
<INPUT TYPE=CHECKBOX NAME="bts"  value="Section de T.S.">Section de T.S.
<INPUT TYPE=CHECKBOX NAME="iut"  value="IUT">IUT
<INPUT TYPE=CHECKBOX NAME="autre"  value="Autre école">Autre école
<P>
Ecrivez ci-dessous le sujet de votre projet informatique :<BR>
<TEXTAREA NAME="Projet" ROWS=5 COLS=55>
Voici mon projet d'option informatique
</TEXTAREA>
<P>
<CENTER>
<TABLE width=90% BORDER=2>
  <TR ALIGN=center>
    <TD width=33%>Valider ces informations<P>;INPUT TYPE=BUTTON 
     VALUE="Enregistrer" onClick='traiter_info(Fiche)'>
    </TD>
    <TD width=33%>Recommencer la saisie<P><INPUT TYPE=RESET 
     VALUE="Effacer">
    </TD>
    <TD width=33%>Fermer le formulaire<P><INPUT TYPE=BUTTON
     VALUE="Fermer" onClick='fermer()'>
    </TD>
  </TR>
</TABLE>
</CENTER>
</FORM>