Discussion :

[Brunodurant42]

Bonjour à tous,

Je me permets de vous exposer mon projet où je rencontre un problème.

Je réalise un formulaire où je demande à un individu de réaliser 3 choix sur 5 propositions. J'utilise des checkbox.

Je souhaite ne pas lui donner la possibilité de faire plus de 3 choix (avec un petit message qui s'affiche)

Ceci je suis arrivé à le faire:

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
<form action="http://xxxxxxx.php" method="post" enctype="multipart/form-data" name="formSaisie1" target="_self" onSubmit="return soumissionOk(this)">
 
...
 
<input name="image1" type="checkbox"  class="photo" id="1" onClick="doAction()">
<input  name="image2" type="checkbox" class="photo" id="2" onClick="doAction()">
<input  name="image3" type="checkbox" class="photo" id="3" onClick="doAction()">
<input  name="image4" type="checkbox" class="photo" id="4" onClick="doAction()">
<input  name="image5" type="checkbox" class="photo" id="5" onClick="doAction()">
 
...
 
<input type="submit" name="Suivant" id="Suivant" value="Suivant">
 
...
 
<script>
function doAction(){
var max = 3;
var z = 0;
var checkboxes = document.getElementsByClassName("photo");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes.item(i).checked == true){
z++
if (z > max) {
checkboxes.item(i).checked = false;
alert('Vous ne pouvez pas faire plus de 3 choix.')
}}}}
</script>

Je souhaiterai aussi l'obliger à faire trois choix (et pas moins) pour qu'il puisse envoyer le formulaire. S'il ne fait pas 3 choix, je ferai apparaître un petit message du genre "Vous devez faire 3 choix"

J'ai essayé en mettant z<max mais, à chaque fois que je clique sur une case à cocher, il me mets mon message d'erreur "vous devez faire 3 choix". Par exemple, je sélectionne un choix, message d'erreur, je sélectionne un 2eme choix, message d'erreur, etc. Je souhaiterai que se soit à la validation du formulaire (envoi) que le message d'erreur s'affiche.

Je pense que c'est au niveau du "clic" validation du formulaire que cela doit se jouer. Et si c'est le cas, je ne sais pas comment faire.

Est-ce que quelqu'un d'entre vous aurez une idée pour m'aider ?

Merci à tous

A bientôt

Bruno

[ProgElecT]

Salut

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
function doAction(){
var max = 3;
var z = 0;
var checkboxes = document.getElementsByClassName("photo");
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes.item(i).checked == true){
    z++
    if (z > max) {
      checkboxes.item(i).checked = false;
      alert('Vous ne pouvez pas faire plus de 3 choix.')
      exitFunction = true
      breack; // <=== sort de la boucle .... et de la function
    }
  }
 }
}

[-Nikopol-]

une autre solution, mettre un écouteur d'évènement sur l'input de type submit, ça evite de lancer la fonction à chaque click sur une checkbox. Ca permet aussi de verifier que le nombre n'est pas inférieur à 3

Code :

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

1
2
3
4
5
6
7
8
9
const btnSubmit = document.querySelector('#Suivant');
        btnSubmit.addEventListener('click', (e) => {
            const checkboxes = document.querySelectorAll("input[type=checkbox]:checked")
            if (checkboxes.length !== 3) {
                console.log(e)
                e.preventDefault();
                alert('Vous ne devez selectionner que 3 items')
            }
        })

PS: utilise const ou let plutot que var, et il est preferable de mettre des ecouteurs d'evenement (addeventlistener) que des fonctions dans les attributs onclick du html.

[Brunodurant42]

Bonjour Nikopol,

Merci beaucoup, ça marche super bien.

Du coup, j'ai modifié pour const

Encore merci

Bruno