Commit b181b9b5 authored by Nathan Peraldi's avatar Nathan Peraldi

improve: the form has now the correct behavior

parent 952ef5db
//liste des blocs qui peuvent être affichés / cachés
var blocks = ["link", "paraSecondSelection", "cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer", "chorus_pro"];
var maxCotisation = 12000;
const blocks = ["link", "paraSecondSelection", "cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer", "chorus_pro"];
const maxCotisation = 12000;
function displayMask(display) {
//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)) {
document.getElementById(blocks[h]).style.display = "block";
} else {
......@@ -19,17 +18,14 @@ function displayMaskOptions(display) {
//sert à afficher / cacher les options du 2e select menu, et modifier le label qui va avec
var toutesLesOptions = document.getElementsByName("optionSelect2");
for (var j = 0; j < toutesLesOptions.length; j++) {
for (let j = 0; j < toutesLesOptions.length; j++) {
//boucle for qui va parcourir la liste des classes des options disponibles
if (display === toutesLesOptions[j].getAttribute("class")) {
//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;
}
......@@ -37,10 +33,9 @@ function displayMaskOptions(display) {
//on affiche le label
document.getElementById("TYPENBR-" + toutesLesOptions[j].getAttribute("class")).style.display = "block";
console.log("on affiche " + document.getElementById("TYPENBR-" + display));
} else {
console.log(display + "=/=" + toutesLesOptions[j].getAttribute("class"));
toutesLesOptions[j].hidden = true;
//On cache le label
......@@ -65,19 +60,20 @@ function firstAction() {
//si il a cliqué sur association
else if (strUser === "Association") {
setCotisation("Association");
displayMask(["cotisation", "informationsCollectivite", "boutonEnvoyer"]);
document.getElementById("secondSelection").required = false;
setSizeRequired(false);
setEPCIRequired(false);
setChorusProRequired(false);
} else if (strUser === "EPCIMutualisant") {
//formulaire contenant la formule spécifique à EPCI mutualisant
displayMask(["formulaireEPCIMutualisant"]);
displayMask(["formulaireEPCIMutualisant", "cotisation", "informationsCollectivite", "chorus_pro", "boutonEnvoyer"]);
setSizeRequired(false);
setEPCIRequired(true);
setChorusProRequired(true);
setCotisation("EPCIMutualisant", 1200);
} else if (strUser === "none") {
//premier choix avec des tirets
......@@ -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
else {
displayMaskOptions(strUser);
document.getElementById("secondSelection").required = true;
setSizeRequired(true);
displayMask(["paraSecondSelection"]);
displayMask(["paraSecondSelection", "cotisation", "informationsCollectivite", "chorus_pro", "boutonEnvoyer"]);
setEPCIRequired(false);
setChorusProRequired(true);
setCotisation("EPCIMutualisant", 0);
}
}
......@@ -115,11 +113,11 @@ function prepareDocument() {
//prépare la page html en ajoutant les event listener
displayMask([""]);
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);
setCotisation("");
//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");
......@@ -138,8 +136,6 @@ function prepareDocument() {
traitementEPCIMutualisant();
} else {
var choiceSize = document.getElementById("ancienSelectSize").getAttribute("value");
if (choiceSize.length > 0 && choiceSize !== "none") {
var listOfSizeOptions = document.getElementsByClassName(choiceType);
......@@ -167,37 +163,36 @@ function secondAction() {
//fonction exécutée lorsque le 2e select est cliqué
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
var selectedTranch = e.options[e.selectedIndex].getAttribute("id");
setCotisation(selectedTranch);
displayMask(["paraSecondSelection", "cotisation", "informationsCollectivite", "boutonEnvoyer", "chorus_pro"]);
//displayMask("paraSecondSelection","cotisation","informationsCollectivite","chorus_pro","boutonEnvoyer");
console.log("ok 1");
} 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.
var paragraphCotList = document.getElementsByClassName("PCOT");
var research = "PCOT-" + id;
for (var b = 0; b < paragraphCotList.length; b++) {
if (paragraphCotList[b].getAttribute("id") === research) {
console.log(paragraphCotList[b].getAttribute("id") + "===" + research);
paragraphCotList[b].style.display = "block";
if (x > 0) {
if (x > -1) {
document.getElementById("montantCotisation").innerHTML = x;
}
} else {
paragraphCotList[b].style.display = "none";
console.log(paragraphCotList[b].getAttribute("id") + "=/=" + research);
}
}
}
......@@ -214,14 +209,21 @@ function setEPCIRequired(boolean) {
document.getElementById("nombreCommunesMembresEPCI").required = boolean;
}
function setSizeRequired(boolean) {
document.getElementById("secondSelection").required = boolean;
}
function traitementEPCIMutualisant() {
//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 nombreCommunesMembres = document.getElementById("nombreCommunesMembresEPCI").value;
if (nombreHabitants !== "") {
if (nombreCommunesMembres !== "") {
if (nombreHabitants !== "" && parseInt(nombreHabitants) >= 0) {
if (nombreCommunesMembres !== "" && parseInt(nombreCommunesMembres) >= 0) {
console.log("nombreHabitants = " + nombreHabitants);
console.log("nombreCommunesMembres = " + nombreCommunesMembres);
var resultat = (0.035 * nombreHabitants) + (15 * nombreCommunesMembres) + 1200;
resultat = Math.round(resultat);
......@@ -238,6 +240,10 @@ function traitementEPCIMutualisant() {
setCotisation("EPCIMutualisant", resultat);
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()
$classInTreatment = $actualClass;
?>
<option class="<?php echo $classInTreatment ?>" value="none" name="optionSelect2">---
<option class="<?php echo $classInTreatment ?>" value="" name="optionSelect2">---
</option>
<?php
}
......@@ -252,6 +252,7 @@ function tryToShowError($var)
global $errors, $debug_mode;
if (strlen($errors[$var]) > 0) {
echo "<p class='error'> " . $errors[$var] . "</p>";
} else {
if ($debug_mode) {
echo "pas d'erreur : " . $errors[$var];
......@@ -316,6 +317,12 @@ get_header();
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<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>
<?php
if ($numberOfErrors == 1) {
......@@ -334,7 +341,10 @@ get_header();
<input id="ancienSelectPeriod" type="hidden" name="ancienSelectPeriod"
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">
<option value="none">---</option>
......@@ -352,26 +362,30 @@ get_header();
<?php tryToShowError("first selection"); ?>
</p>
<div id="link">
<a href="contact.php" id="linkRedirection">Texte</a>
</div>
<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"
value="<?php tryToEcho("nombreHabitantsEPCI"); ?>"><br>
<?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"
value="<?php tryToEcho("nombreCommunesMembresEPCI"); ?>"><br>
<?php tryToShowError("EPCI hab"); ?>
<input type="button" value="Valider" id="boutonValiderNombresEPCI">
</div>
<p id="paraSecondSelection">
<div id="paraSecondSelection">
<?php
//on génère les labels
......@@ -385,8 +399,10 @@ get_header();
generateSecondSelection(); ?>
</select>
<?php tryToShowError("second Selection"); ?>
</p>
</div>
<div id="cotisation">
......@@ -400,13 +416,9 @@ get_header();
<div id="informationsCollectivite">
<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">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Nom de la collectivité :
</label>
<input type="text" name="nomCollectivite" id="nomCollectivite" required=""
......@@ -414,21 +426,21 @@ get_header();
<?php tryToShowError("nom"); ?>
<label for="adresseCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Adresse :</label>
<input type="text" name="adresseCollectivite" id="adresseCollectivite" required=""
value="<?php tryToEcho("adresseCollectivite"); ?>"><br>
<?php tryToShowError("adresse"); ?>
<label for="codePostalCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Code postal :</label>
<input type="text" name="codePostalCollectivite" id="codePostalCollectivite" required=""
value="<?php tryToEcho("codePostalCollectivite"); ?>"><br>
<?php tryToShowError("CP"); ?>
<label for="villeCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Ville :</label>
<input type="text" name="villeCollectivite" id="villeCollectivite" required=""
value="<?php tryToEcho("villeCollectivite"); ?>"><br>
......@@ -447,7 +459,7 @@ get_header();
<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>
<select name="periodeAdhesionCollectivite" id="periodeAdhesionCollectivite" required="">
<option class="optionPeriod" value="" selected>---</option>
......@@ -461,7 +473,7 @@ get_header();
<h3>Informations relatives à Chorus Pro</h3>
<label for="siretCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
SIRET :
</label>
<input type="number" name="siretCollectivite" id="siretCollectivite" required=""
......@@ -470,7 +482,7 @@ get_header();
<label for="numeroEngagementCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
N° d'engagement :
</label>
<input type="text" name="numeroEngagementCollectivite" id="numeroEngagementCollectivite"
......@@ -479,7 +491,7 @@ get_header();
<?php tryToShowError("numeroEngagement"); ?>
<label for="codeCollectivite">
<abbr class="adullact-abbr" title="Champ obligatoire">*</abbr>
<abbr class="adullact-required" title="Champ obligatoire">*</abbr>
Code :
</label>
<input type="text" name="codeCollectivite" id="codeCollectivite" required=""
......@@ -491,7 +503,6 @@ get_header();
<input type="submit" id="boutonEnvoyer">
</form>
<script type="text/javascript" src="<?php echo $JSPath ?>"></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