Discussion :

[flexi2202]

bonjour a tous

j ai un soucis avec un sondage ou je désire rendre obligatoire chaque groupe de bouton radio
donc dans mon cas 5 boutons

voici mon code mais cela ne fonctionne pas

merci de l'aide

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<p>1. Avez vous déjà perler ?:</p>
<div>
  <input type="radio" id="oui" name="drone" value="oui"
         >
  <label for="oui">oui</label>
</div>
 
<div>
  <input type="radio" id="non" name="drone" value="non">
  <label for="non">Non</label>
</div>
 
<div>
  <input type="radio" id="juste_une_fois" name="drone" value="juste_une_fois">
  <label for="juste_une_fois">Juste une fois</label>
</div>
<div>
  <input type="radio" id="je_n_crois_pas" name="drone" value="je_n_crois_pas">
  <label for="je_n_crois_pas">je n y crois pas</label>
</div>
  </div>
  <div class="card border-secondary text-secondary"style="margin-bottom:10px;">
 <p> 2. Apres la visite de mon blog , seriez vous prêt a sauter le pas ?</p>
 
  <div>
  <input type="radio" id="oui" name="drone1" value="oui"
         >
  <label for="oui">oui</label>
</div>
 
<div>
  <input type="radio" id="non" name="drone1" value="non">
  <label for="non">Non</label>
</div>
<div>
 
  <input type="radio" id="peut_etre" name="drone1" value="peut_etre">
  <label for="peut_etre">Peut-etre</label>
</div>
</div>
<div>
<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
<p>3.Trouvez-vous des perles facilement ?</p>
   <div>
  <input type="radio" id="oui" name="drone3" value="oui"
         >
  <label for="oui">oui</label>
</div>
 
<div>
  <input type="radio" id="non" name="drone3" value="non">
  <label for="non">Non</label>
</div> 
</div>
  <div class="card border-secondary text-secondary"style="margin-bottom:10px;">
 <p> 4. Connaissez vous des perleurs ?</p>
    <div>
  <input type="radio" id="oui" name="drone4" value="oui"
         >
  <label for="oui">oui</label>
</div>
 
<div>
  <input type="radio" id="non" name="drone4" value="non">
  <label for="non">Non</label>
</div> 
 </div> 
 
  <div class="card border-secondary text-secondary"style="margin-bottom:10px;">
 <p> 5.Que penses tu de mon blog?</p>
 
 <div>
  <input type="radio" id="tres_bien" name="drone5" value="tres_bien"
         >
  <label for="tres_bien">Tres bien</label>
</div>
 
<div>
  <input type="radio" id="bien" name="drone5" value="bien">
  <label for="bien">bien</label>
</div>
 
<div>
  <input type="radio" id="satisfaisant" name="drone5" value="satisfaisant">
  <label for="satisfaisant">Satisfaissant</label>
</div>
 <div>
  <input type="radio" id="faible" name="drone5" value="faible">
  <label for="faible">faible</label>
</div>  
 
<div>
  <input type="radio" id="tres_faible" name="drone5" value="tres_faible">
  <label for="tres_faible">Tres faible</label>
</div>
 <div>
  <input type="radio" id="faible" name="drone5" value="faible">
  <label for="faible">faible</label>
</div>

et un code de javascript que j ai essaye de modifier car je n y connais rien

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
24
25
26
27
28
29
30
31
32
33
34
35
<script>
       //on selectionne notre form sur lequel on souhaite écouter les évenements
 
       const formulaire = document.querySelector('#sectionForm');
 
       //si on clic sur "Envoyer" on vérifi si il y a un minimum de case cochées:
 
      formulaire.onsubmit = function(e){
        let verif1 = verifier_si_cochee('drone[]');
        let verif2 = verifier_si_cochee('drone1[]');
  let verif3 = verifier_si_cochee('drone3[]');
  let verif4 = verifier_si_cochee('drone4[]');
  let verif5 = verifier_si_cochee('drone5[]');
 
        if(verif1 && verif2  && verif3  && verif4  && verif5   ) {
          return true;
        } else {
          e.preventDefault();
          //et on bloque le soumission du form:
          return false;
        }
      }
 
      function verifier_si_cochee(name_input) {
        //avec cette fonction, on boucle chaque case et retourne true si ya une case cochée
        let input=formulaire.querySelectorAll('input[name="'+name_input+'",]:checked')
        if( input.length > 0 ){
          return true;
        }else{
          alert("Vous devez choisir au moins une case dans :" + name_input);
          return false;
        }
      }
 
      </script>

[Doksuri]

et pourquoi ne pas cocher par default une option ?

[flexi2202]

merci pour l idée
cela va être pour la plupart des personnes âgées qui viendront sur mon site et donc ils risquent de comprendre que cela est déjà coché

[Eckmül]

Il faut en effet checker la valeur par défaut de la balise input que tu souhaites cocher il y a un exemple dans la doc developer mozilla :

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
<p>Select a maintenance drone:</p>
 
<div>
  <input type="radio" id="huey" name="drone" value="huey"
         checked>
  <label for="huey">Huey</label>
</div>
 
<div>
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>
 
<div>
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

[flexi2202]

merci pour la reponse
pour ce genre de chose il existe des plugins en javascript

donc c est résolu