Recommandations :
Toutes les fonctions JavaScript devront être développées dans un fichier intitulé
“Controle.js”.
Il n’est pas demandé de reproduire la même mise en forme du formulaire.
1) Créer la page “Evaluation.html” contenant le formulaire ci-dessous qui permet de
soumettre l’évaluation d’un hôtel à travers les critères “Accueil”, “Restauration” et
“Extra”
Sachant que :
Les valeurs de l’attribut “value” des différents critères sont décrites comme suit :
*La zone “Captcha” est utilisée pour sécuriser le site web contre les robots. Elle sera
remplie automatiquement, dès le chargement de la page, par une chaîne retournée
suite à l’appel d’une fonction JavaScript intitulée “GenererCaptcha”.
*Le clic sur le bouton “Actualiser” permet d’appeler la fonction “GenererCaptcha”
afin de régénérer une nouvelle valeur de la zone “Captcha”.
*Le clic sur le bouton “Annuler” permet d’initialiser les champs du formulaire.
*Le clic sur le bouton “Valider” fait appel à :
-Une fonction JavaScript intitulée “Verif”
2) Développer la fonction “GenererCaptcha” permettant de générer une chaîne de dix
lettres dont chacune est obtenue selon le principe suivant:
générer aléatoirement un nombre K entre 1 et 26,
déterminer l’équivalent alphabétique majuscule de K s’il est pair, ou bien son
équivalent minuscule dans le cas contraire.
Remarque : Il est possible d’exploiter les fonctions JavaScript standards suivantes :
3) Développer la fonction “Verif” permettant de vérifier la validité des champs du
formulaire en respectant les contrôles ci-dessous :
* La sélection d’un hôtel est obligatoire.
* L’évaluation des critères “Accueil” et “Restauration” est obligatoire.
* La valeur saisie dans la zone “Réponse” doit être égale à celle figurant dans la zone “Captcha”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>evaluation hotel</title>
</head>
<body onload="genererCaptcha()">
<center>
<h1>evaluation hotel</h1>
</center>
<legend>
<fieldset>
<p>hotel : <select name="hotel" id="hotel">
<option value="0" selected>choisir un hotel</option>
<option value="">5 Stars</option>
<option value="">Globe</option>
<option value="">The sum</option>
</select></p>
<fieldset id="satis">
<label for="choice1" id="choice1">
<p>Acceuil:
<label for="s1">
<span>tres satisfaisant</span>
<input type="radio" id="c1" value="3" name="acc" class="radioCheck">
</label>
<label for="s2">
<span> satisfaisant</span>
<input type="radio" id="c2" value="2" name="acc" class="radioCheck">
</label>
<label for="s3">
<span>peu satisfaisant</span>
<input type="radio" id="c3" value="3" name="acc" class="radioCheck">
</label>
</p>
</label>
</fieldset>
<br>
<fieldset>
<p>Restauration:
<label for="s1">
<span>tres satisfaisant</span>
<input type="radio" name="s1" id="c4" value="3">
</label>
<label for="s2">
<span> satisfaisant</span>
<input type="radio" name="s2" id="c5" value="2">
</label>
<label for="s3">
<span>peu satisfaisant</span>
<input type="radio" name="s3" id="c6" value="3">
</label>
</fieldset>
<br>
<fieldset>
<span>Extra :</span>
<span>
<input type="checkbox" name="" id="c7">
piscine couverte
</span>
<span>
<input type="checkbox" name="" id="c8"> Plage privée
</span>
<span>
<input type="checkbox" name="" id="c9">
couverture wifi
</span>
</fieldset>
<br>
<fieldset>
<span>Capetcha</span>
<input type="text" id="captcha" name="captcha">
<input type="button" value="actualiser" onclick="genererCaptcha()">
<br>
<br>
<span>Reponse </span>
<input type="text" name="reponse" id="reponse">
</fieldset>
<br>
<input type="submit" value="verifier" onclick="verif()"><input type="reset" value="annuler">
</fieldset>
</legend>
<script defer src="controle.js"></script>
</body>
</html>function genererCaptcha() {
var captcha = "";
for (var i = 0; i < 10; i++) {
let k = Math.floor(Math.random() * 26) + 1;
if (k % 2 === 0) {
captcha += String.fromCharCode(k + 64);
} else {
captcha += String.fromCharCode(k + 96);
}
}
document.getElementById("captcha").value = captcha;
}
function verif() {
var hotel = document.getElementById("hotel").selectedIndex;
if (hotel == 0) {
alert("Veuillez selectionner un hotel!!!");
return false;
}
accueil = document.getElementById("c1").checked || document.getElementById("c2").checked || document.getElementById("c3").checked
if (!accueil) {
alert("veuillez noter service accueil")
return false;
}
restau = document.getElementById("c4").checked || document.getElementById("c5").checked || document.getElementById("c5").checked
if (!restau) {
alert("veuillez noter service restauration")
return false;
}
extra = document.getElementById("c7").checked || document.getElementById("c8").checked || document.getElementById("c9").checked
if (!extra) {
alert("veuillez noter les extra")
return false;
}
var response = document.getElementById("reponse").value;
var captcha = document.getElementById("captcha").value;
if (response != captcha) {
alert("Veuillez remplir correctement le champ reponse");
return false;
}
}