Modifier plusieurs INPUT type="radio" en fonction d'un choix
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:
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:
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 :
Citation:
;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:
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 :lol:
Merci par avance et bonne journée !
