Bouton BACK formulaire

Version imprimable

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

J'ai essayé de créer un bouton "back" en JQuery mais sans succès

Code:

<button type="button" id="back" value="Back">

Besoin d'aide, merci d'avance

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
 
(function($) {
 
    "use strict";
 
    $(document).ready(function() {
 
        let wrappers = $(".form-wrapper");
 
        var data = {};
 
        var choices = $("button[data-field]");
        choices.each(function(i, d) {
            $(d).click(function(e) {
                e.preventDefault();
                let target = $(e.target);
                let field = target.attr("data-field");
                let value = target.attr("value");
                data[field] = value;
                console.log(data);
                next_q(target);
            });
        });
 
 
        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");
 
        }
    });
 
 
})(window.jQuery);

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
 
<div class="form-wrapper">
 <form id="house-type" autocomplete="off">
    <div class="form-group">
    <button type="button" class="btn_1 full-width" data-field="type_habitation" answer="1" id="house-type-individual" value="1">
      ex 1
      </button>
    </div>
  <div class="form-group">
    <button type="button" class="btn_1 full-width" data-field="type_habitation" answer="2" id="house-type-flat" value="2">
     ex2
   </button>
  </div>
 </form>
</div>
<div class="form-wrapper  no-display">
 <form id="house-type" autocomplete="off">
    <div class="form-group">
    <button type="button" class="btn_1 full-width" data-field="type_habitation" answer="1" id="house-type-individual" value="1">
      ex 1
      </button>
    </div>
  <div class="form-group">
    <button type="button" class="btn_1 full-width" data-field="type_habitation" answer="2" id="house-type-flat" value="2">
     ex2
   </button>
  </div>
 </form>
</div>
<div class="form-wrapper  no-display">
 <form id="house-type" autocomplete="off">
    <div class="form-group">
    <button type="button" class="btn_1 full-width" data-field="type_habitation" answer="1" id="house-type-individual" value="1">
      ex 1
      </button>
    </div>
  <div class="form-group">
    <button type="button" class="btn_1 full-width" data-field="type_habitation" answer="2" id="house-type-flat" value="2">
     ex2
   </button>
  </div>
 </form>
</div>

Tout autre chose, est-ce qu'avec cette méthode de lecture de formulaire, est-il possible d'avoir une fourchette, une dérivation ? (je sais pas trop quel mot est approprié)
cad: (avec A et B dans le meme form) un clic sur choix A ouvre un choix X, un clic choix B ouvre un choix Y

Bonjour,

1- 1ère(s) remarque() :
Code:

1 2 3 4 5 6 7 8 9 10 <form id="house-type" ...> ... <button ... id="house-type-individual" ...> <button ... id="house-type-flat" ...> ... <form id="house-type" ...> ... <button ... id="house-type-individual" ...> <button ... id="house-type-flat" ...> ...
NON.
Un attribut id DOIT ÊTRE UNIQUE.

De plus, il me semble qu'UN SEUL <form> englobant le tout devrait convenir.

answer="1". Mieux : data-answer="1".

2- "bouton Back" : pour quoi faire ?
C'est bien gentil de montrer du code, encore faut-il des explications et des commentaires (dans le code).

3- "clic sur choix A ouvre un choix X, un clic choix B ouvre un choix Y"
Oui, c'est possible.

Citation:

"Tout est possible, tout est réalisable, c'est le jeu de la vie"

Le formulaire que j'utilise fonctionne nickel, j'ai été trop vite dans mon copier/coller, voici le code html

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
 
<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">
      ex 1
      </button>
    </div>
  <div class="form-group">
    <button type="button" data-field="type_1" data-answer="2" id="b1" value="2">
     ex2
   </button>
  </div>
 </form>
</div>
<div class="form-wrapper  no-display">
 <form id="ex2-type" autocomplete="off">
    <div class="form-group">
    <button type="button" data-field="type_2" data-answer="1" id="a2" value="1">
      ex 1
      </button>
    </div>
  <div class="form-group">
    <button type="button" data-field="type_2" data-answer="2" id="b2" value="2">
     ex2
   </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>

Le formulaire comprends 10 questions, toute sous la forme d'un form/form, j'aurais besoin d'un bouton BACK, que l'on puisse par exemple revenir de la question 7 a la question 6

Dans le code JS il y a une fonction next_q, je me doute bien que le "back" sera du style
$(wrappers[index - 1]).removeClass("no-display");

Etant novice en JS, je n'ai pas la moindre idée comment mettre ce bouton en place.
Si vous pensez pouvoir m'aider un peu, merci d'avance

Bonjour,

Si on met un bouton "Back" dans chaque "form-wrapper" (sauf dans le 1er) :

Code:

1
2
3
4
5
6
7
<div class="form-wrapper">
 <form id="ex3-type" autocomplete="off">
...
    <button type="button" class="btn-back">Back</button>
  </div>
 </form>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
  $(document).ready(function() {
 
    $('.btn-back').on('click', function(e) {
      let current = $(e.target).closest(".form-wrapper");
      let index = wrappers.index(current);
      $(current).addClass("no-display");
      $(wrappers[index - 1]).removeClass("no-display");
    });
 
  });

11/02/2020, 08h45
KOogar

Impeccable !