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