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 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
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 ajax : 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
 
 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