Ajout formulaire intermédiaire
Bonjour,
Je suis en train de créer une formulaire avec des questions, le classique, celui qui ouvre un div tout en fermant l'autre, qui passe d'un formulaire a l'autre
Maintenant j'essaye d'ajouter une dérivation, des questions subsidiaires
cad: (avec A et B dans le même form) un clic sur choix A ouvre un choix X, un clic choix B ouvre un choix Y
Pour le faire j'ai simplement glisser le formulaire des questions subsidiaires entre les autres
si on répond oui, le formulaire prochain sont les questions subsidiaires
si on répond non, on passe sur un pas de 2 pour sauter le formulaire des questions subsidiaires
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<div class="form-wrapper">
<form id="ex1-type" autocomplete="off">
<div class="form-group">
<button type="button" data-field="type_1" data-answer="1" id="a1" value="1">
oui
</button>
</div>
<div class="form-group">
<!-- ajout de l'id pour sauter un pas de 2 -->
<button id="derivation1" type="button" data-field="type_1" data-answer="2" id="b1" value="2">
non
</button>
</div>
</form>
</div>
<!-- QUESTIONS SUBSIDIARES -->
<!-- ajout d'un hidden id="masque" -->
<div class="form-wrapper no-display" id="masque">
<form id="ex2-type" autocomplete="off">
<div class="form-group">
<button type="button" data-field="type_2" data-answer="1" id="a2" value="1">
réponse subsidiare
</button>
</div>
<div class="form-group">
<button type="button" data-field="type_2" data-answer="2" id="b2" value="2">
réponse subsidiare
</button>
</div>
</form>
</div>
<div class="form-wrapper no-display">
<form id="ex3-type" autocomplete="off">
<div class="form-group">
<button type="button" data-field="type_3" data-answer="1" id="a3" value="1">
ex 1
</button>
</div>
<div class="form-group">
<button type="button" data-field="type_3" data-answer="2" id="b3" value="2">
ex2
</button>
</div>
</form>
</div> |
Pour ca j'ai donc créer un appel, sur le bouton derivation1, et donc on saute un pas de 2
Code:
1
2
3
4
5
6
7
8
|
$("#derivation1").on('click', function(e) {
let current = $(e.target).closest(".form-wrapper");
let index = wrappers.index(current);
$(wrappers[index + 2]).removeClass("no-display");
deriv = false;
}); |
Mais le problème c'est qu'il y une autre fonction dans le code qui elle ouvre le formulaire de nouveau
donc je me retrouve avec 2 formulaires sur la page
J'ai donc bricolé une exception (en testant la variable "deriv"), mais c'est assez vilain coté code même si ca fonctionne, et en jouant avec les aller retour
avec le bouton BACK https://www.developpez.net/forums/d2...ulaire-jquery/
ca fini par beuger
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var deriv = true;
choices.each(function(i, d) {
$(d).click(function(e) {
e.preventDefault();
let target = $(e.target);
let field = target.attr("data-field");
next_q(target);
if (deriv === false) { $(wrapper).find("#masque").addClass("no-display"); };
});
function next_q(target) {
let current = target.closest(".form-wrapper");
let index = wrappers.index(current);
$(current).addClass("no-display");
$(wrappers[index + 1]).removeClass("no-display"); |
Comment écrire cela plus proprement ? Merci d'avance
