Discussion :

[Bogibogs]

Bonjour à tous,

Je réalise actuellement un questionnaire qui peut comporter beaucoup de questions (plus de 100 questions parfois sur la même page).

Afin de faire gagner du temps à l'utilisateur, je souhaite utiliser le javascript pour cocher automatiquement certaines cases lorsqu'il n'est pas concerné par la catégorie.

J'ai créé un petit script rapide pour vous expliquer très rapidement ce que je souhaite faire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<h6>Nom de la thématique par exemple légumes .</h6>
<p>QUESTION 1 (question 1 et 2 liées)<br />
	Oui: <input id="1" type="checkbox" value="blue" /><br />
	Non: <input id="2" type="checkbox" value="yellow" /><br />
	Non concerné (C): <input id="3" onclick="test();" type="checkbox" value="red" /><br />
</p>
<p> QUESTION 2<br />
	Oui: <input id="4" type="checkbox" value="blue" /><br />
	Non: <input id="5" type="checkbox" value="yellow" /><br />
	Non concerné : <input id="6" type="checkbox" value="red" /><br />
</p>
<p> QUESTION 3<br />
	Oui: <input id="7" type="checkbox" value="blue" /><br />
	Non: <input id="8" type="checkbox" value="yellow" /><br />
	Non concerné : <input id="9" type="checkbox" value="red" /><br />
</p>
<p><h6>Nom de la thématique par exemple fruits .</b></h6>
<p>QUESTION 4 (question 5 et 6 liées)<br />
	Oui: <input id="10" type="checkbox" value="blue" /><br />
	Non: <input id="11" type="checkbox" value="yellow" /><br />
	Non concerné (C): <input id="12" onclick="test12();" type="checkbox" value="red" /><br />
</p>
<p> QUESTION 5<br />
	Oui: <input id="13" type="checkbox" value="blue" /><br />
	Non: <input id="14" type="checkbox" value="yellow" /><br />
	Non concerné : <input id="15" type="checkbox" value="red" /><br />
</p>
<p> QUESTION 6<br />
	Oui: <input id="16" type="checkbox" value="blue" /><br />
	Non: <input id="17" type="checkbox" value="yellow" /><br />
	Non concerné : <input id="18" type="checkbox" value="red" /><br />
</p>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function test() {
	var inputID1 = document.getElementById('3');
    if(inputID1.checked){
    	document.getElementById("6").checked = true;
    	document.getElementById("9").checked = true;
	}
    if(!inputID1.checked){
    	document.getElementById("6").checked = false;
    	document.getElementById("9").checked = false;
	}
}
function test12() {
	var inputID12 = document.getElementById('12');
    if(inputID12.checked){
    	document.getElementById("15").checked = true;
    	document.getElementById("18").checked = true;
	}
    if(!inputID12.checked){
    	document.getElementById("15").checked = false;
    	document.getElementById("18").checked = false;
	}
}
</script>

Concernant l'action quand une case par une case est cochée par l'utilisateur, un script JS détecte au onclick et met à jour les réponses de l'utilisateur en asynchrone avec XMLHttpRequest. (ça fonctionne très bien à ce jour)
Les réponses de l'utilisateur sont stockées dans une chaîne de caractères stockée en BDD. La chaîne est fabriquée comme suit :

;1281r1;1284r1;1192r1;1201r1;1211r1;1219r1;1227r1;1228r1;1231r1;1234r1;1238r1;1240r1;1245r1;1249r1;1253r1;1258r1;1263r1;1267r0;1266r1;1275r1;1274r1;1790r1;1268r0;1269r0;1270r0;1271r0;1195r1;1196r1;1197r0;1223r1;1314r1;1333r1;1193r1;1194r1;1198r1;1205r1;1050r0;1049r0;1051r1;1797r1;1059r1

En résumé, il y a l'ID de la réponse, le r1 ou r0 pour indiquer si la case est cochée ou non, puis le dé limitateur ";".
Je réalise des traitements de la chaine de caractère en PHP en fonction des réponses avec des preg_replace, preg_match, ..."


Jusqu'à là, aucun problème si mes questionnaires étaient statiques et que je pouvais modifier directement le script à la main.
Sauf que c'est un questionnaire qui se génère à partir des données enregistrées dans une BDD MySQL et qui est régulièrement MAJ suite aux différentes modifications de l'administrateur.

Souhaitant ne pas faire une usine à gaz, j'ai donc une question :
Aujourd'hui, j'arrive sans aucun problème à modifier le résultat de l'utilisateur une réponse par une réponse. Sauf qu'avec cette évolution, il faut que je puisse mettre à jour plusieurs réponses à la fois lorsqu'il y a une case cochée comme dans l'exemple ci-dessus. Il faut donc que je puisse générer un script JS au chargement de la page avec les données stockées en BDD.
Est-ce réalisable de générer un script JS en PHP à l'aide de plusieurs WHILE ? Ou voyez-vous une solution plus saine ? ^^

En gros est-ce possible ce joli mélange des codes ?

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php 
while (toutes les reponses ayant des réponses liées) {
?>
<script>
function test<?= $id_reponse; ?>() {
	var inputID<?= $id_reponse; ?> = document.getElementById('<?= $id_reponse; ?>');
    if(inputID<?= $id_reponse; ?>.checked){
		$chaine_reponse = "".$id_reponse."r1";
		<?php 
 
		while (toutes les réponses liées) {
    		echo "document.getElementById("<?= $id_autres_reponses; ?>").checked = true;";
			$chaine_reponse .= "".$id_autres_reponses."r1;";
		}
 
	?>
	}
    }
</script>
}

Bon, il doit manquer quelques parenthèses, points virgules et autres

Merci par avance et bonne journée !

[mathieu]

pour avoir un code plus clair, il vaut mieux ne pas construire le code javascript mais plutot avoir du code javascript fixe et uniquement passer des données entre php et javascript.
cela peut se faire comme cela par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
// code php
// données construites à partir des base de données
$liste_questions = [12, 254, 48];
 
?>
 
 
<script>
// création des données javascript à partir des données php
let liste_questions = <?php echo json_encode($liste_questions);?>;
 
// et ici traitement javascript des données
console.log(liste_questions);
 
 
</script>