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
Javascript checkbox - Meilleures réponses
Checkbox js - Meilleures réponses
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Selectionner un seul checkbox et cacher les autres checkbox ✓ - Forum Javascript / DHTML
Checkbox html ✓ - Forum PHP

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