Discussion :

[geopra]

Bonjour à tous,

J'ai un problème avec boostrap multiple select, le code fonctionne, le soucis, c'est que lorsque l'on clique sur une des checkboxs des options du select, le formulaire s'envoie tout seul, alors que c'est juste une checkbox, pas un input submit ...

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
<div class="btn-toolbar">
    <div class="btn-group">
        <select name="f_nocontact[]" id="f_select_nocontact" multiple="multiple">
            <option value="0">par téléphone</option>
            <option value="1">par mail</option>
            <option value="2">par courrier</option>
            <option value="3">par PPA</option>
        </select>
    </div>
</div>

Le code d'initialisation du multiple select (qui fonctionne) :

Code js :

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

1
2
3
4
5
6
7
$(document).ready(function() {
    $('#f_select_nocontact').multiselect({
        maxHeight: 200,
        includeSelectAllOption: true,
        enableFiltering: false
    });
});

Voici un screen de comment la checkbox apparait :


Le problème : Quand je clique n'importe où sauf sur une checkbox, ça fonctionne sans problèmes, mais quand je clique sur la checkbox directement, là, une requête POST est envoyée...

Solution : Comment puis-je empêcher le formulaire de s'envoyer ?
Ou bien comment puis-je enlever les checkbox tout en laissant la possibilité de faire un choix multiple ?

Merci d'avance pour vos réponses, je cherche depuis hier sans rien trouver...

[Toufik83]

Bonjour,

La question est plutôt pourquoi le formulaire se soumet et pas comment bloquer sa soumission.

Je viens de tester Bootstrap Multiselect (probablement c'est la version que tu utilises) et aucune soumission n'est déclenchée !

Vérifies que tes balises html sont bien fermées, surtout les <a> ayant un href et les boutons submit, sinon et si tu utilises une version ancienne de bootstrap multiselect, regardes cette réponse qui montre l'utilisation de l'option preventInputChangeEvent: true qui n'existe pas dans la nouvelle version.

[geopra]

Bonjour,

Merci pour votre réponse.

J'ai tenté d'ajouter

Code js :

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

preventInputChangeEvent: true

à mes select mais rien n'y fait. J'ai regardé mes versions de jquery.min.js / boostrap.min.js / et même tout simplement bootstrap, et il s'avère que j'avais les anciennes versions.

Alors pour jQuery ça ne pose pas de problèmes, mais quand je change la version de boostrap, en fait comme j'utilise la version 4, ça me fait tout planter.

Donc serait-ce lié au fait que j'utilise Bootstrap 4 au lieu de Bootstrap 5 ? Ou alors j'ai manqué quelque chose encore ?

J'ai aussi bien vérifié les balises de mon formulaire, et aucun problème

Je tiens à préciser aussi qu'après avoir testé ce matin sur Edge et sur Chrome, je n'ai pas ce problème ! Serait-ce lié à Firefox ?


Merci d'avance pour votre aide qui m'est précieuse !

Bonne journée

[Toufik83]

Bonjour,

Je viens de tester sous Firefox et le problème est réapparu.

Ce n'est pas ta faute, c'est plutôt celle du créateur de plugin, il a oublié d'ajouter un attribut type aux boutons.

Un <button> dans un <form> sans l'attibut type est considéré comme un bouton de type submit, il faut donc préciser le type='button' afin d'éviter ce comportement inattendu.

Il y'a deux possibilités pour éviter le problème, soit d'empêcher complétement la soumission du formulaire ou bien attribuer un type="button" aux boutons du form :

Code :

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
 
$(document).ready(function() {
   /*première solution :*/
  $('#f_select_nocontact').multiselect({
    buttonWidth: '400px',
    dropRight: true,
    includeSelectAllOption: true
  })
  .parent()
  .find('button.dropdown-item').attr('type','button');//attribuer un type="button" à tous les boutons ayant la class "dropdown-item"
 
   /* 2éme solution */
   $('#f_select_nocontact').multiselect({
    buttonWidth: '400px',
    dropRight: true,
    includeSelectAllOption: true
  })
  .closest('form')
  .submit(function(e){
	e.preventDefault();//empêcher la soumission
  });
 
});

Utiliser la 1ere solution me parait plus correcte, car on ne sait jamais si un jour tu auras besoin de soumettre le formulaire.

[geopra]

Alors j'ai essayé, pareil, mais rien n'y fait :/

J'ai même essayé d'ajouter "manuellement" l'attribut type="button" directement dans le bootstrap-multiselect.min.js et aucun résultat...

Je commence à me demander si je vais pas changer de plugin

[Toufik83]

Bonjour,

Montres le code que tu as mis, car comme je t'ai dit, j'ai testé sous firefox et ça a fonctionné.

[geopra]

Alors voici ce que j'ai mis :

Code js :

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

1
2
3
4
5
6
7
8
9
 
$('#f_nc_select_no_contact').multiselect({
    maxHeight: 200,
    dropRight: true,
    enableFiltering: false,
    includeSelectAllOption: true
})
.parent()
.find('button.dropdown-item').attr('type','button');

mais j'ai trouvé ça par contre :

[Toufik83]

Ce n'est pas ce bouton qu'il faut inspecter, mais plutôt le <div class="multiselect-container dropdown-menu show" ...></div> qui est juste en dessous et contient les boutons ayant la class .dropdown-item :

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
<div class="multiselect-container dropdown-menu show" x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(400px, 5px, 0px);">
<button class="dropdown-item multiselect-all" title=" Select all" type="button">
   <span class="form-check">
       <input class="form-check-input" type="checkbox" value="multiselect-all">
       <label class="form-check-label font-weight-bold"> Select all</label>
   </span>
</button>
<button class="multiselect-option dropdown-item active" title="par téléphone" type="button">
   <span class="form-check">
       <input class="form-check-input" type="checkbox" value="0">
       <label class="form-check-label">par téléphone</label>
   </span>
</button>
<button class="multiselect-option dropdown-item active" title="par mail" type="button">
   <span class="form-check">
       <input class="form-check-input" type="checkbox" value="1">
       <label class="form-check-label">par mail</label>
   </span>
</button>
<button class="multiselect-option dropdown-item" title="par courrier" type="button"> 
   <span class="form-check">
      <input class="form-check-input" type="checkbox" value="2">
      <label class="form-check-label">par courrier</label>
   </span>
</button>
<button class="multiselect-option dropdown-item" title="par PPA" type="button">
    <span class="form-check">
       <input class="form-check-input" type="checkbox" value="3">
       <label class="form-check-label">par PPA</label>
    </span>
</button>
</div>

.

Ils ont bien un attribut type="button" ?

[geopra]

Ah !

Alors on avance là, en effet, le button du dessous n'a pas l'attribut type="button", je l'ai rajouté dans l'inspecteur et là ça fonctionne.

Il faut maintenant que je trouve comment on l'ajoute proprement, auriez-vous une idée ? Car c'est là que les checkbox sont affichées et je ne les ai pas trouvées dans les fichiers .js ...

[Toufik83]

Colles le code généré pour voir pourquoi .parent() n'a pas fonctionné pour toi, probablement parce qu'on utilise deux versions différentes ...

Il vaut mieux mettre le code au lieu des images...

Sinon et si tu veux modifier le plugin, ouvre le dans un éditeur de code, cherche le mot templates ça devrait pointer sur un objet :

Code :

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

1
2
3
4
5
6
 
templates:{
....,
option:'<button class="multiselect-option dropdown-item" type="button"></button>',
.....,
}

Ajoute type="button" à la fin et c'est réglé.

[geopra]

Voici le code html généré :

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
 
<div class="btn-toolbar">
  <div class="btn-group">
    <span class="multiselect-native-select">
      <select name="f_nc_contact_nocontact[]" id="f_nc_select_no_contact" multiple="multiple">
        <option value="1">par téléphone</option>
      </select>
      <div class="btn-group dropright show">
        <button type="button" class="multiselect dropdown-toggle custom-select" type="button" data-toggle="dropdown" title="None selected" aria-expanded="true">
          <span class="multiselect-selected-text">None selected</span>
        </button>
        <div class="multiselect-container dropdown-menu show" style=".....">
          <button class="dropdown-item multiselect-all" title=" Select all">
            <span class="form-check">
              <input class="form-check-input" type="checkbox" value="multiselect-all">
              <label class="form-check-label font-weight-bold">
                Select all
              </label>
            </span>
          </button>
          <button class="multiselect-option dropdown-item" title="par mail">
            <span class="form-check">
              <input class="form-check-input" type="checkbox" value="1">
              <label class="form-check-label">
                par téléphone
              </label>
            </span>
          </button>
        </div>
      </div>
    </span>
  </div>
</div>

[Toufik83]

C'est le même code que j'ai, aucune différence, je ne comprends toujours pas pourquoi parent() n'a pas fonctionné !

Essayons de préciser encore plus le sélecteur jQuery en remplaçant .parent().find("").attr(..) par :

Code :

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

1
2
3
4
 
.next('.btn-group')
.find('.multiselect-container button.dropdown-item')
.attr('type','button');

Toujours rien ?

[geopra]

Toujours rien malheureusement.

En revanche, j'ai réussi à trifouiller un peu et j'ai réussi à mettre l'attribut type="button" à .multiselect-container avec le code suivant :

Code js :

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

1
2
 
.parent().find('.btn-group').find('.multiselect-container').attr('type','button');

Mais il refuse de descendre jusqu'aux boutons...

[geopra]

Bon, c'est moche et ça m'oblige à faire la même chose sur chaque élément, et je risque d'oublier par la suite que j'ai fait ça donc j'ai été modifier directement le plugin, j'ai ajouté type="button" comme vous m'avez dit, et le problème est réglé !

Ça me va très bien comme ça !

Merci en tout cas pour votre aide précieuse, j'ai cherché "template" dans le fichier mais sur vscode visiblement il n'arrive pas à trouver quoi que ce soit quand le minify est sur une ligne seulement.

Bref, bonne année et merci je passe en résolu

[Toufik83]

Bonjour,

Content que le problème est résolu.

Si parent a fonctionné pour le div et pas pour les boutons, eh ben probablement parce que les boutons n'étaient pas encore générés lors de l'attribution de type.

Apparemment la version compressé est différente du normal, car mes tests étaient basés sur la version normal (non compressée).

Bonne année à toi également, merci.