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

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Besoin d'aide, merci d'avance

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
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 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
 
<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

[Invité]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

[KOogar]

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

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
 
<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

[Invité]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
    });
 
  });

[KOogar]

Impeccable !