Verifier si au moins un checkbox est coché

Résolu

crixuss

Messages postés: 25
Date d'inscription: jeudi 29 août 2013
Statut: Membre
Dernière intervention: 14 novembre 2016

- 29 août 2013 à 14:10
crixuss

Messages postés: 25
Date d'inscription: jeudi 29 août 2013
Statut: Membre
Dernière intervention: 14 novembre 2016

- 29 août 2013 à 16:49

Bonjour,

Je fait un formulaire dans lequel un utilisateur doit faire un choix entre plusieurs événements, et j'aimerais que quand aucune case n'est choisie qu'un message d'erreur s'affiche tant qu'il n'en a pas sélectionné une. J'ai essayer de le faire en javascript mais rien ne ce passe quand je fais le test.

Merci d'avance.

Voici mon code HTML:


<form method="post" action="fiche_signal.php" name="form" id="form"> 

   <input type ="checkbox" name="evenement[0]" value = "Affectation au cours de la periode" id="evenement"></input>
   <input type ="checkbox" name="evenement[1]" value = "Changement de manager"  id="evenement1"></input>
   <input type ="checkbox" name="evenement[2]" value = "Evolution de methode de travail"  id="evenement2"></input>
   <input type ="checkbox" name="evenement[3]" value = "Longue abscence"  id="evenement3"></input>
   <input type ="checkbox" name="evenement[4]" value = "Autres Evenement"  id="evenement4"></input>
   <input type ="checkbox" name="evenement[5]" value = "Aucun Evenement"    id="evenement5></input>

</form>

voici mon code javascript:

   <head>
        <title>EVENEMENT</title>
   
        <script>
   
        	function ctr()
        	{
        		var listOfInputs = document.getElementsByTagName('evenement[]');
        		var listOfInputsLength = listOfInputs.length;
        		var atLeastOneChecked = false;	
        	
        	
        	for (var i=0; i < listOfInputsLength; i++)
        	{
        		if (listOfInputs[i].ckecked)
        		{
        			atLeastOneChecked = true;
        			break;
        		}
        	}
        	
        	if(atLeastOneChecked)
        	{
        		return true;
        	}
        	else
        	{
        	alert("rien n'est coché");
        	return false;
        	}
        	}	
        </script>
        
    </head>

A voir également:

Checkbox javascript
Checkbox js - Meilleures réponses
Javascript checkbox - Meilleures réponses
Récupérer valeur checkbox javascript ✓ - Forum - Javascript / DHTML
Checkbox recuperer la valeur ✓ - Forum - PHP
comment récupérer la valeur d'un checkbox (true/false) - Forum - ASP / ASP.NET
Récupérer valeur champs input par javascript - Forum - Javascript / DHTML
Javascript : Traitement des données avec un checkbox - CodeS SourceS - Guide

1 réponse

Réponse 1 / 1

nicotontige

Messages postés: 28
Date d'inscription: mardi 25 octobre 2005
Statut: Membre
Dernière intervention: 8 octobre 2013

2
Modifié par nicotontige le 29/08/2013 à 15:09

Bonjour,

Je vois déjà 2-3 erreurs :
- getElementsByTagName => Retourne un tableau (Array) d'objets HTML à partir de nom de la balise (tag en anglais). Ici evenement est le nom, et nom un tag
le listOfInputsLength aurait pu te mettre la puce à l'oreille, il est initialisé à 0.
- manque un guillemet à l'id du dernier checkbox
- problème de synthaxe :
listOfInputs[i].ckecked => listOfInputs[i].checked (on ne confond pas k et h quand même)

j'ai essayé de toucher au minimum ton script, ce qui donne :

<form method="post" action="fiche_signal.php" name="form" id="form">

   <input type ="checkbox" name="evenement[0]" value = "Affectation au cours de la periode" id="evenement0"></input>
   <input type ="checkbox" name="evenement[1]" value = "Changement de manager"  id="evenement1"></input>
   <input type ="checkbox" name="evenement[2]" value = "Evolution de methode de travail"  id="evenement2"></input>
   <input type ="checkbox" name="evenement[3]" value = "Longue abscence"  id="evenement3"></input>
   <input type ="checkbox" name="evenement[4]" value = "Autres Evenement"  id="evenement4"></input>
   <input type ="checkbox" name="evenement[5]" value = "Aucun Evenement"    id="evenement5"></input>
   
   <input type="button" onclick="ctr()" value="valider"></input>

</form>

changement d'id pour le premier checkbox
rajout du guillement manquant

<script>
   
         function ctr()
   {
    var atLeastOneChecked = false; 
    var i = 0;
    
    while (document.getElementById("evenement" + i))
    {
     if (document.getElementById("evenement" + i).checked)
     {
      atLeastOneChecked = true;
      break;
     }
     i++;
    }
    
    if(atLeastOneChecked == true)
    {
     return true;
    }
    else
    {
     alert("rien n'est coché");
     return false;
    }
         } 
        </script>

edit : manquait un bouton valider aussi ....
dans la fonction ctr(), il te suffira de rajouter un submit du form pour terminer ton formulaire

crixuss

Messages postés: 25
Date d'inscription: jeudi 29 août 2013
Statut: Membre
Dernière intervention: 14 novembre 2016

29 août 2013 à 16:49

un grand merci pour ton aide, ça marche nickel!!

Votre réponse