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