Discussion :

[KOogar]

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

[SpaceFrog]

Quelle est l'ergonomie au niveau soumission ?
Pourquoi 50 forms et pas un seul ?

[KOogar]

Bonjour

Avec un formulaire classique, sur les mobiles beaucoup d'utilisateurs abandonnent a cause de la profondeur de la page;
Ce formulaire est donc fait pour des utilisateurs format mobile essentiellement.
L'idée est que l'utilisateur n'est aucun scroll à faire pour le remplir afin de diminuer le taux d'abandon.

Cdlt

[SpaceFrog]

Nul besoin d'utiliser 50 formulaires dans ce cas
Un seul formulaire et des fieldsets dont tu gères l'affichage séquentiel

[KOogar]

Je suppose que cela facilitera l’exploitation du code ensuite
Pourrais-je avoir des exemples que je reprenne le code de 0
Merci

[SpaceFrog]

Dans le principe cela pourrait donner un truc comme ça:
https://jsfiddle.net/jhL8ev7w/1

Après au niveau de l'enchaînement tu peux aussi prévoir des retours, des bifurcations selon les saisies etc ...