Commit b181b9b5 authored by N. Peraldi's avatar N. Peraldi

improve: the form has now the correct behavior

parent 952ef5db
//liste des blocs qui peuvent être affichés / cachés //liste des blocs qui peuvent être affichés / cachés
var blocks = ["link", "paraSecondSelection", "cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer", "chorus_pro"]; const blocks = ["link", "paraSecondSelection", "cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer", "chorus_pro"];
var maxCotisation = 12000; const maxCotisation = 12000;
function displayMask(display) { function displayMask(display) {
//fonction qui affiche / cache les formulaires / informations en fonction des données entrées dans les formulaires //fonction qui affiche / cache les formulaires / informations en fonction des données entrées dans les formulaires
for (var h = 0; h < blocks.length; h++) { for (let h = 0; h < blocks.length; h++) {
if (isWordIn(blocks[h], display)) { if (isWordIn(blocks[h], display)) {
document.getElementById(blocks[h]).style.display = "block"; document.getElementById(blocks[h]).style.display = "block";
} else { } else {
...@@ -19,17 +18,14 @@ function displayMaskOptions(display) { ...@@ -19,17 +18,14 @@ function displayMaskOptions(display) {
//sert à afficher / cacher les options du 2e select menu, et modifier le label qui va avec //sert à afficher / cacher les options du 2e select menu, et modifier le label qui va avec
var toutesLesOptions = document.getElementsByName("optionSelect2"); var toutesLesOptions = document.getElementsByName("optionSelect2");
for (let j = 0; j < toutesLesOptions.length; j++) {
for (var j = 0; j < toutesLesOptions.length; j++) {
//boucle for qui va parcourir la liste des classes des options disponibles //boucle for qui va parcourir la liste des classes des options disponibles
if (display === toutesLesOptions[j].getAttribute("class")) { if (display === toutesLesOptions[j].getAttribute("class")) {
//si l'element en cours est celui de la classe recherchée //si l'element en cours est celui de la classe recherchée
console.log(display + "===" + toutesLesOptions[j].getAttribute("class"));
if (toutesLesOptions[j].getAttribute("value") === "none") { if (toutesLesOptions[j].getAttribute("value") === "") {
toutesLesOptions[j].selected = true; toutesLesOptions[j].selected = true;
} }
...@@ -37,10 +33,9 @@ function displayMaskOptions(display) { ...@@ -37,10 +33,9 @@ function displayMaskOptions(display) {
//on affiche le label //on affiche le label
document.getElementById("TYPENBR-" + toutesLesOptions[j].getAttribute("class")).style.display = "block"; document.getElementById("TYPENBR-" + toutesLesOptions[j].getAttribute("class")).style.display = "block";
console.log("on affiche " + document.getElementById("TYPENBR-" + display));
} else { } else {
console.log(display + "=/=" + toutesLesOptions[j].getAttribute("class"));
toutesLesOptions[j].hidden = true; toutesLesOptions[j].hidden = true;
//On cache le label //On cache le label
...@@ -65,19 +60,20 @@ function firstAction() { ...@@ -65,19 +60,20 @@ function firstAction() {
//si il a cliqué sur association //si il a cliqué sur association
else if (strUser === "Association") { else if (strUser === "Association") {
setCotisation("Association"); setCotisation("Association");
displayMask(["cotisation", "informationsCollectivite", "boutonEnvoyer"]); displayMask(["cotisation", "informationsCollectivite", "boutonEnvoyer"]);
document.getElementById("secondSelection").required = false; setSizeRequired(false);
setEPCIRequired(false); setEPCIRequired(false);
setChorusProRequired(false); setChorusProRequired(false);
} else if (strUser === "EPCIMutualisant") { } else if (strUser === "EPCIMutualisant") {
//formulaire contenant la formule spécifique à EPCI mutualisant //formulaire contenant la formule spécifique à EPCI mutualisant
displayMask(["formulaireEPCIMutualisant"]);
displayMask(["formulaireEPCIMutualisant", "cotisation", "informationsCollectivite", "chorus_pro", "boutonEnvoyer"]);
setSizeRequired(false);
setEPCIRequired(true); setEPCIRequired(true);
setChorusProRequired(true); setChorusProRequired(true);
setCotisation("EPCIMutualisant", 1200);
} else if (strUser === "none") { } else if (strUser === "none") {
//premier choix avec des tirets //premier choix avec des tirets
...@@ -87,11 +83,13 @@ function firstAction() { ...@@ -87,11 +83,13 @@ function firstAction() {
//si il a cliqué sur autre chose : on cherche à connaitre la taille de la collectivité, on affiche le 2e select //si il a cliqué sur autre chose : on cherche à connaitre la taille de la collectivité, on affiche le 2e select
else { else {
displayMaskOptions(strUser); displayMaskOptions(strUser);
document.getElementById("secondSelection").required = true; setSizeRequired(true);
displayMask(["paraSecondSelection"]); displayMask(["paraSecondSelection", "cotisation", "informationsCollectivite", "chorus_pro", "boutonEnvoyer"]);
setEPCIRequired(false); setEPCIRequired(false);
setChorusProRequired(true); setChorusProRequired(true);
setCotisation("EPCIMutualisant", 0);
} }
} }
...@@ -115,11 +113,11 @@ function prepareDocument() { ...@@ -115,11 +113,11 @@ function prepareDocument() {
//prépare la page html en ajoutant les event listener //prépare la page html en ajoutant les event listener
displayMask([""]); displayMask([""]);
document.getElementById("firstSelect").addEventListener("change", firstAction, false); document.getElementById("firstSelect").addEventListener("change", firstAction, false);
document.getElementById("boutonValiderNombresEPCI").addEventListener("click", traitementEPCIMutualisant, false); document.getElementById("nombreHabitantsEPCI").addEventListener("change", traitementEPCIMutualisant, false);
document.getElementById("nombreCommunesMembresEPCI").addEventListener("change", traitementEPCIMutualisant, false);
document.getElementById("secondSelection").addEventListener("change", secondAction, false); document.getElementById("secondSelection").addEventListener("change", secondAction, false);
setCotisation(""); setCotisation("");
//si le formulaire a échoué, il y a probablement des zones à afficher en fonction de ce qui a été rempli //si le formulaire a échoué, il y a probablement des zones à afficher en fonction de ce qui a été rempli
var choiceType = document.getElementById("ancienSelectType").getAttribute("value"); var choiceType = document.getElementById("ancienSelectType").getAttribute("value");
...@@ -138,8 +136,6 @@ function prepareDocument() { ...@@ -138,8 +136,6 @@ function prepareDocument() {
traitementEPCIMutualisant(); traitementEPCIMutualisant();
} else { } else {
var choiceSize = document.getElementById("ancienSelectSize").getAttribute("value"); var choiceSize = document.getElementById("ancienSelectSize").getAttribute("value");
if (choiceSize.length > 0 && choiceSize !== "none") { if (choiceSize.length > 0 && choiceSize !== "none") {
var listOfSizeOptions = document.getElementsByClassName(choiceType); var listOfSizeOptions = document.getElementsByClassName(choiceType);
...@@ -167,37 +163,36 @@ function secondAction() { ...@@ -167,37 +163,36 @@ function secondAction() {
//fonction exécutée lorsque le 2e select est cliqué //fonction exécutée lorsque le 2e select est cliqué
var e = document.getElementById("secondSelection"); var e = document.getElementById("secondSelection");
if (e.options[e.selectedIndex].value !== "none") { if (e.options[e.selectedIndex].value !== "") {
//s'il a sélectionné autre chose que les tirets //s'il a sélectionné autre chose que les tirets
var selectedTranch = e.options[e.selectedIndex].getAttribute("id"); var selectedTranch = e.options[e.selectedIndex].getAttribute("id");
setCotisation(selectedTranch); setCotisation(selectedTranch);
displayMask(["paraSecondSelection", "cotisation", "informationsCollectivite", "boutonEnvoyer", "chorus_pro"]); //displayMask("paraSecondSelection","cotisation","informationsCollectivite","chorus_pro","boutonEnvoyer");
console.log("ok 1");
} else { } else {
displayMask(["paraSecondSelection"]);
setCotisation("EPCIMutualisant", 0);
} }
} }
function setCotisation(id, x = 0) { function setCotisation(id, x = -1) {
//définit la cotisation à afficher, l'option x sert uniquement pour le tarif EPCI mutualisant qui varie. //définit la cotisation à afficher, l'option x sert uniquement pour le tarif EPCI mutualisant qui varie.
var paragraphCotList = document.getElementsByClassName("PCOT"); var paragraphCotList = document.getElementsByClassName("PCOT");
var research = "PCOT-" + id; var research = "PCOT-" + id;
for (var b = 0; b < paragraphCotList.length; b++) { for (var b = 0; b < paragraphCotList.length; b++) {
if (paragraphCotList[b].getAttribute("id") === research) { if (paragraphCotList[b].getAttribute("id") === research) {
console.log(paragraphCotList[b].getAttribute("id") + "===" + research);
paragraphCotList[b].style.display = "block"; paragraphCotList[b].style.display = "block";
if (x > 0) { if (x > -1) {
document.getElementById("montantCotisation").innerHTML = x; document.getElementById("montantCotisation").innerHTML = x;
} }
} else { } else {
paragraphCotList[b].style.display = "none"; paragraphCotList[b].style.display = "none";
console.log(paragraphCotList[b].getAttribute("id") + "=/=" + research);
} }
} }
} }
...@@ -214,14 +209,21 @@ function setEPCIRequired(boolean) { ...@@ -214,14 +209,21 @@ function setEPCIRequired(boolean) {
document.getElementById("nombreCommunesMembresEPCI").required = boolean; document.getElementById("nombreCommunesMembresEPCI").required = boolean;
} }
function setSizeRequired(boolean) {
document.getElementById("secondSelection").required = boolean;
}
function traitementEPCIMutualisant() { function traitementEPCIMutualisant() {
//lorsque l'utilisateur valide les 2 nombres entrés pour l'EPCI, les traitements nécessaires sont ici //lorsque l'utilisateur valide les 2 nombres entrés pour l'EPCI, les traitements nécessaires sont ici
var nombreHabitants = document.getElementById("nombreHabitantsEPCI").value; var nombreHabitants = document.getElementById("nombreHabitantsEPCI").value;
var nombreCommunesMembres = document.getElementById("nombreCommunesMembresEPCI").value; var nombreCommunesMembres = document.getElementById("nombreCommunesMembresEPCI").value;
if (nombreHabitants !== "") { if (nombreHabitants !== "" && parseInt(nombreHabitants) >= 0) {
if (nombreCommunesMembres !== "") { if (nombreCommunesMembres !== "" && parseInt(nombreCommunesMembres) >= 0) {
console.log("nombreHabitants = " + nombreHabitants);
console.log("nombreCommunesMembres = " + nombreCommunesMembres);
var resultat = (0.035 * nombreHabitants) + (15 * nombreCommunesMembres) + 1200; var resultat = (0.035 * nombreHabitants) + (15 * nombreCommunesMembres) + 1200;
resultat = Math.round(resultat); resultat = Math.round(resultat);
...@@ -238,6 +240,10 @@ function traitementEPCIMutualisant() { ...@@ -238,6 +240,10 @@ function traitementEPCIMutualisant() {
setCotisation("EPCIMutualisant", resultat); setCotisation("EPCIMutualisant", resultat);
displayMask(["cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer", "chorus_pro"]); displayMask(["cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer", "chorus_pro"]);
} else {
setCotisation("EPCIMutualisant", 1200);
} }
} else {
setCotisation("EPCIMutualisant", 1200);
} }
} }
\ No newline at end of file
...@@ -202,7 +202,7 @@ function generateSecondSelection() ...@@ -202,7 +202,7 @@ function generateSecondSelection()
$classInTreatment = $actualClass; $classInTreatment = $actualClass;
?> ?>
<option class="<?php echo $classInTreatment ?>" value="none" name="optionSelect2">--- <option class="<?php echo $classInTreatment ?>" value="" name="optionSelect2">---
</option> </option>
<?php <?php
} }
...@@ -252,6 +252,7 @@ function tryToShowError($var) ...@@ -252,6 +252,7 @@ function tryToShowError($var)
global $errors, $debug_mode; global $errors, $debug_mode;
if (strlen($errors[$var]) > 0) { if (strlen($errors[$var]) > 0) {
echo "<p class='error'> " . $errors[$var] . "</p>"; echo "<p class='error'> " . $errors[$var] . "</p>";
} else { } else {
if ($debug_mode) { if ($debug_mode) {
echo "pas d'erreur : " . $errors[$var]; echo "pas d'erreur : " . $errors[$var];
...@@ -316,6 +317,12 @@ get_header(); ...@@ -316,6 +317,12 @@ get_header();
<div id="primary" class="content-area"> <div id="primary" class="content-area">
<main id="main" class="site-main" role="main"> <main id="main" class="site-main" role="main">
<h1>Formulaire de renouvellement d'adhésion</h1> <h1>Formulaire de renouvellement d'adhésion</h1>
<p>Les champs portant une astérisque
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
sont obligatoires
</p>
<p> <p>
<?php <?php
if ($numberOfErrors == 1) { if ($numberOfErrors == 1) {
...@@ -334,7 +341,10 @@ get_header(); ...@@ -334,7 +341,10 @@ get_header();
<input id="ancienSelectPeriod" type="hidden" name="ancienSelectPeriod" <input id="ancienSelectPeriod" type="hidden" name="ancienSelectPeriod"
value="<?php tryToEcho("periodeAdhesionCollectivite") ?>"> value="<?php tryToEcho("periodeAdhesionCollectivite") ?>">
<label for="firstSelect">Veuillez sélectionner le type de collectivité :</label> <label for="firstSelect">
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Veuillez sélectionner le type de collectivité :
</label>
<select id="firstSelect" required="" name="firstSelection"> <select id="firstSelect" required="" name="firstSelection">
<option value="none">---</option> <option value="none">---</option>
...@@ -352,26 +362,30 @@ get_header(); ...@@ -352,26 +362,30 @@ get_header();
<?php tryToShowError("first selection"); ?> <?php tryToShowError("first selection"); ?>
</p> </p>
<div id="link"> <div id="link">
<a href="contact.php" id="linkRedirection">Texte</a> <a href="contact.php" id="linkRedirection">Texte</a>
</div> </div>
<div id="formulaireEPCIMutualisant"> <div id="formulaireEPCIMutualisant">
<label for="nombreHabitantsEPCI">Nombre d'habitants de l'EPCI :</label> <label for="nombreHabitantsEPCI">
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Nombre d'habitants de l'EPCI :
</label>
<input type="number" name="nombreHabitantsEPCI" id="nombreHabitantsEPCI" <input type="number" name="nombreHabitantsEPCI" id="nombreHabitantsEPCI"
value="<?php tryToEcho("nombreHabitantsEPCI"); ?>"><br> value="<?php tryToEcho("nombreHabitantsEPCI"); ?>"><br>
<?php tryToShowError("EPCI com"); ?> <?php tryToShowError("EPCI com"); ?>
<label for="nombreCommunesMembresEPCI">Nombre de communes membres :</label> <label for="nombreCommunesMembresEPCI">
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Nombre de communes membres :
</label>
<input type="number" name="nombreCommunesMembresEPCI" id="nombreCommunesMembresEPCI" <input type="number" name="nombreCommunesMembresEPCI" id="nombreCommunesMembresEPCI"
value="<?php tryToEcho("nombreCommunesMembresEPCI"); ?>"><br> value="<?php tryToEcho("nombreCommunesMembresEPCI"); ?>"><br>
<?php tryToShowError("EPCI hab"); ?> <?php tryToShowError("EPCI hab"); ?>
<input type="button" value="Valider" id="boutonValiderNombresEPCI">
</div> </div>
<p id="paraSecondSelection"> <div id="paraSecondSelection">
<?php <?php
//on génère les labels //on génère les labels
...@@ -385,8 +399,10 @@ get_header(); ...@@ -385,8 +399,10 @@ get_header();
generateSecondSelection(); ?> generateSecondSelection(); ?>
</select> </select>
<?php tryToShowError("second Selection"); ?> <?php tryToShowError("second Selection"); ?>
</p>
</div>
<div id="cotisation"> <div id="cotisation">
...@@ -400,13 +416,9 @@ get_header(); ...@@ -400,13 +416,9 @@ get_header();
<div id="informationsCollectivite"> <div id="informationsCollectivite">
<h3>Coordonnées :</h3> <h3>Coordonnées :</h3>
<p>Les champs portant une astérisque
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
sont obligatoires
</p>
<label for="nomCollectivite"> <label for="nomCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Nom de la collectivité : Nom de la collectivité :
</label> </label>
<input type="text" name="nomCollectivite" id="nomCollectivite" required="" <input type="text" name="nomCollectivite" id="nomCollectivite" required=""
...@@ -414,21 +426,21 @@ get_header(); ...@@ -414,21 +426,21 @@ get_header();
<?php tryToShowError("nom"); ?> <?php tryToShowError("nom"); ?>
<label for="adresseCollectivite"> <label for="adresseCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Adresse :</label> Adresse :</label>
<input type="text" name="adresseCollectivite" id="adresseCollectivite" required="" <input type="text" name="adresseCollectivite" id="adresseCollectivite" required=""
value="<?php tryToEcho("adresseCollectivite"); ?>"><br> value="<?php tryToEcho("adresseCollectivite"); ?>"><br>
<?php tryToShowError("adresse"); ?> <?php tryToShowError("adresse"); ?>
<label for="codePostalCollectivite"> <label for="codePostalCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Code postal :</label> Code postal :</label>
<input type="text" name="codePostalCollectivite" id="codePostalCollectivite" required="" <input type="text" name="codePostalCollectivite" id="codePostalCollectivite" required=""
value="<?php tryToEcho("codePostalCollectivite"); ?>"><br> value="<?php tryToEcho("codePostalCollectivite"); ?>"><br>
<?php tryToShowError("CP"); ?> <?php tryToShowError("CP"); ?>
<label for="villeCollectivite"> <label for="villeCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Ville :</label> Ville :</label>
<input type="text" name="villeCollectivite" id="villeCollectivite" required="" <input type="text" name="villeCollectivite" id="villeCollectivite" required=""
value="<?php tryToEcho("villeCollectivite"); ?>"><br> value="<?php tryToEcho("villeCollectivite"); ?>"><br>
...@@ -447,7 +459,7 @@ get_header(); ...@@ -447,7 +459,7 @@ get_header();
<label for="periodeAdhesionCollectivite"> <label for="periodeAdhesionCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Période d'adhésion :</label> Période d'adhésion :</label>
<select name="periodeAdhesionCollectivite" id="periodeAdhesionCollectivite" required=""> <select name="periodeAdhesionCollectivite" id="periodeAdhesionCollectivite" required="">
<option class="optionPeriod" value="" selected>---</option> <option class="optionPeriod" value="" selected>---</option>
...@@ -461,7 +473,7 @@ get_header(); ...@@ -461,7 +473,7 @@ get_header();
<h3>Informations relatives à Chorus Pro</h3> <h3>Informations relatives à Chorus Pro</h3>
<label for="siretCollectivite"> <label for="siretCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
SIRET : SIRET :
</label> </label>
<input type="number" name="siretCollectivite" id="siretCollectivite" required="" <input type="number" name="siretCollectivite" id="siretCollectivite" required=""
...@@ -470,7 +482,7 @@ get_header(); ...@@ -470,7 +482,7 @@ get_header();
<label for="numeroEngagementCollectivite"> <label for="numeroEngagementCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
N° d'engagement : N° d'engagement :
</label> </label>
<input type="text" name="numeroEngagementCollectivite" id="numeroEngagementCollectivite" <input type="text" name="numeroEngagementCollectivite" id="numeroEngagementCollectivite"
...@@ -479,7 +491,7 @@ get_header(); ...@@ -479,7 +491,7 @@ get_header();
<?php tryToShowError("numeroEngagement"); ?> <?php tryToShowError("numeroEngagement"); ?>
<label for="codeCollectivite"> <label for="codeCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr> <abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Code : Code :
</label> </label>
<input type="text" name="codeCollectivite" id="codeCollectivite" required="" <input type="text" name="codeCollectivite" id="codeCollectivite" required=""
...@@ -491,7 +503,6 @@ get_header(); ...@@ -491,7 +503,6 @@ get_header();
<input type="submit" id="boutonEnvoyer"> <input type="submit" id="boutonEnvoyer">
</form> </form>
<script type="text/javascript" src="<?php echo $JSPath ?>"></script> <script type="text/javascript" src="<?php echo $JSPath ?>"></script>
<script> <script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment