Technologies Internet et Education, © TECFA6. Traitement de formulaires avec Javascript
<HTML> <HEAD> <TITLE>Un simple test avec JavaScript (18-Nov-1997)</TITLE> <script language="JavaScript"> // Initialisation de variables var q1 = 1; var q2 = 1; // calcul function calculer () { score = q1 + q2; alert("Sur une échelle qui va de 2 à 6 vous avez " + score) }</script>
</HEAD> <BODY> <H1>Un simple test avec JavaScript</H1>Cette page montre comment faire un simple test avec Javascript.Remplissez le formulaire suivant SVP: <P>
<hr><form>Quelles sont vos connaissances de HTML ?<input type="radio" name="choice" value="1" onClick="q1=1" checked>faibles<input type="radio" name="choice" value="2" onClick="q1=2">moyennes<input type="radio" name="choice" value="3" onClick="q1=3">bonnes<br>Indiquez votre expertise en programmation:<input type="radio" name="choice2" value="1" onClick="q2=1" checked>absente<input type="radio" name="choice2" value="2" onClick="q2=2">moyenne<input type="radio" name="choice2" value="3" onClick="q2=3">bonne<P><input type="button" name="ProcessButton" value="Voir le résultat!" onClick="calculer()"></form><hr></HTML>
<input type="radio" name="choice" value="1" onClick="q1=1" checked>faibles<input type="radio" name="choice" value="2" onClick="q1=2">moyennes<input type="radio" name="choice" value="3" onClick="q1=3">bonnes
<input type="button" name="ProcessButton" value="Voir le résultat!" onClick="calculer()">
function calculer () { score = q1 + q2; alert("Sur une échelle qui va de 2 à 6 vous avez " + score) }
Chaque élément de la page correspond à un objet qui s’insère dans un arbre hiérarchique. " les boutons radio réponse1 sont dans le formulaire questions qui se trouve dans le document par défaut".
On nomme l’objet en écrivant sa hiérarchie :
Voici quelques exemples pour accéder à des propriétés ou à des méthodes :
document.question.submit();
elements = document.questions.length;
Voici la fonction displayScore modifiée et commentée:
function displayScore () {
document.questions.submit.checked = false;
// on déclare la variable score et on initialise à 0
var score = 0;
// on regarde combien d’éléments il y a dans le formulaire
elements = document.questions.length;
// on fait ensuite un boucle sur le nombre d’éléments pour les passer en revue un par un.
var i;
for (i = 0; i < elements; i++) {
// on regarde si l’élément est "checked". Si oui, on calcule le score
if (document.questions.elements[i].checked) {
score = score + eval(document.questions.elements[i].value);
}
}
// feedback
...
Voici une manière de faire assez moderne:
<form id="quiz" action="#" method="get">
<input type="submit" value="Voir le résultat!" /> </form>
// Ceci associe la fonction init à l'événement charger la page
// Quand cela charge, le navigateur va chercher la fonction et l'exécuter
window.onload = init;
// Cette fonction associe une éventhandler function "doit" à l'évévenement
// où l'utilisateur soumet la forme
function init () {
document.getElementById("quiz").onsubmit = doit;
}
var q1 = -1;var q2 = -1;
function verif () { if ( (q1 < 0) || (q2 < 0) ) { alert ("Il faudrait remplir tous les champs SVP !"); return false; } else return true;}
function calculer () { // Si verif retourn false on quitte le navire if (!verif()) return ; // sinon on continue score = q1 + q2; alert("Sur une échelle qui va de 2 à 6 vous avez " + score) ;}
Cet exemple reprend le formulaire discuté dans le module "Les formulaires HTML" et y ajoute deux fonctions Javascript permettant de vérifier que l'utilisateur n'a pas laissé de champs vides.
<input type="submit" value="Envoi">
<input type="button" value="Envoi" onClick="checkForm(this.form)">
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">function checkBlank(input,msg){ if (input.value == null || input.value.length == 0) { alert ("Il faut remplir les champs Nom et Email"); return false; } return true;}function checkForm(form){ if ( !checkBlank(form.nom) || !checkBlank(form.email)) { return false; } form.submit(); alert ("Merci pour votre reponse ..."); return true;}</SCRIPT>
</HEAD><BODY><h1>Vérification de formulaire avec Javascript</h1>
<form enctype="application/x-www-form-urlencoded" action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>Votre Nom <input type="text" name="nom" size=15> <p>Votre email <input type="text" name="email" size=15> <p>Votre commentaire <textarea name="comment" rows=5 cols=30></textarea><p><input type="button" value="Envoi" onClick="checkForm(this.form)"><input type="reset" value="Effacer"></form></BODY></HTML>
1) est ce que les champs en question ont une valeur (est-ce que l'utilisateur a tapé quelque chose).
2) Est-ce que les champs sont remplis par autre chose que des espaces ?
Si les questions 1) et 2) ont une reponse positive alors la fonction “checkBlank” retourne la valeur true qui signifie dans notre cas, 'tout est en ordre'. Dès lors le test dans la fonction chekForm est satisfait et l'appel form.submit() envoie le contenu du formulaire.
Voici la fonction checkBlank modifiée:
(voir la source de la page HTML ci-dessus pour l’ensemble)
function checkBlank(input,msg){ if (input.value == null || input.value.length == 0) { alert ("Il faut remplir les champs Nom et Email"); return false; } var str = input.value; for (var i = 0; i < str.length ;i++){ var ch = str.substring(i,i+1); if ( ch == " ") { alert (msg ); return false; } } return true;}
-- TIE