récupération de la valeur d'une checkbox coché + caché DIV

07 mai 2007, 17:58

Bonjour à tous,

Je voudrais récupérer la valeur d'une checkbox qui est coché ... oulala !!
exemple : j'ai 3 checkbox

<input type='checkbox' value='text' id='idText' />
<input type='checkbox' value='password' id='idPassword' />

<input type='element.checked.value' >

Voilà ... c'est schématisé mais ... je voudrais récuperé la valeur de la checkbox qui est coché !!
Est-ce que je dois tester à chaque fois si l'élement est checked par rapport à l'ID est récupéré la valeur ?
Comment je peux en Javascript et HTML mettre dynamiquement la valeur dans le champ !! ??? [/code]

07 mai 2007, 18:00

Fais un tour dans la FAQ, il y a un sujet qui traite ce problème.

09 mai 2007, 11:58

ok ok ... j'ai résolé à moitié mon problème ....
Mais là je n'arrive pas à récupérer la valeur de mon Input malgré un getElementByID !!!

Code : Tout sélectionner

<Script language="Javascript"> 
function test() { 
   alert (document.getElementById(idSemaine).value); 
} 
</script> 

<body> 
<form name="echelle"> 

<table border="0" class="ecwBackgroundIhm" cellspacing="0" cellpading="0"> 
  <tr> 
    <td class="ecwBodyIhm" align="center">
      <table border="0" cellspacing="2" cellpadding="2" > 
        <tr>
          <td align="right"><label id='sem'>Semaine</label>  
            <input type='radio' id='idSemaine' name='echel' value='%Y' checked /><br> 
         </td>  
         <td width="25"></td>  
         <td align="right"><label id='moi'>Mois</label>  
           <input type='radio' id='idMois' name='echel'  value='%Y-%M' />
         </td>  
         <td width="25"></td>  
         <td align="right"><label id="ann" for="idAnnee">Année</label> 
           <input type="radio" value="%Y" id="idAnnee" name="echel" />  
         </td>
         <td><input id="boutton" type="button" onclick="test()"/></td>    
       </tr>  
     </table>  
   </td> 
  </tr>
</table>

</form> 
</body>

Cela me renvoie que document.getElementById(idSemaine) "has no properties" !!!

09 mai 2007, 12:11

et avec la valeur entre " "

alert (document.getElementById("idSemaine").value);

Il faut une chaine de caractère comme argument dans la fonction getElementById()...

09 mai 2007, 13:16

Ca à l'aire de fonctionner ... mais je redoute un autre probleme !!

Merci beaucoup !!!

09 mai 2007, 14:59

ok j'ai testé et ça marche impécable ....
Néanmoins il me reste encore un petit probleme et pas des moindres !!
je voudrais inscrire quelque chose dans une balise INPUT !!

Pour faire simple, j'utilise une bibliothèque Javascript qui me permet d'afficher dans une DIV, un mini calendrier où je peux récupérer la date selectionné. Cela fonctionne très bien, j'arrive à récupérer des valeurs...

Dans un Input je dois renseigner une variable "ecwPattern" qui doit être à "%Y" si je ne veux que l'année selectionné ... "%d-%M-%Y" si je veux la date complète .. etc !!

le but des bouton radio est de choisir entre "semaine", "mois" ou "annee" pour l'ordonnée d'un graphique ... (brefff ...)

voilà comment se présente le code

Code : Tout sélectionner

<div class="ecwCalendar" ecwPattern="%Y-%m" id="idDateDebutCal" >
    <input type="text" value="" name="debut"/>
</div>

je voudrais changer la valeur de "ecwPattern" en fonction du boutton radio selectionné. Donc si je choisis "Année", j'arrive à récupéré sa value = "%Y" ...
Mais je n'arrive pas donné cette valeur à EcwPattern. Je n'ai pas les codes sources de la bibliothèque !!

Voilà je ne sais pas si vous avez une idée ... mais faites le moi savoir !!!

09 mai 2007, 15:37

Pour modifier l'attribut, il te suffit normalement de procéder ainsi :

Code : Tout sélectionner

document.getElementById('idDateDebutCal').ecwPattern.value = '...' ;

Par contre, ne sachant pas si la valeur est vérifiée automatiquement à chaque fois ou gardée en mémoire, il te faudra peut être rejouer une fonction pour prendre en compte la nouvelle valeur dans ton script..

(et si c'est du javascript, tu as forcément les codes sources

)

09 mai 2007, 16:24

Non, les attributs personalisés sont stockés dans la collection "attribute" de la balise sous index numérique.
javascript peut accéder à un attribut perso par son nom pour la lecture seule en utilisant getAttribute() et pour la mise à jour par setAttribute() ou en trouvant son index dans la collection par une boucle qui situe l'attribut.

Exemple:

Code : Tout sélectionner

<Script language="Javascript"> 
function test() { 
   alert ("idSemaine = " + document.getElementById("idSemaine").value); 
   for( var x = 0; x < document.getElementById("idDateDebutCal").attributes.length; x++ )
	if( document.getElementById("idDateDebutCal").attributes[x].nodeName == "ecwPattern" ) {
		document.getElementById("idDateDebutCal").attributes[x].nodeValue = document.getElementById("idSemaine").value;
   }
   alert("ecwPattern = " + document.getElementById("idDateDebutCal").getAttribute("ecwPattern"));
} 
</script>

09 mai 2007, 16:39

Ok ok ok ... merci beaucoup !!

mais je savais déjà récupérer la valeur de ecwPattern (grâce à getAttribute) mais moi je voudrais chnager la valeur de ecwPattern !!
Elle a une valeur de départ et je voudrais la changer en fonction du boutton radio selectionné !!
La fonction ne rend pas la même donnée sur les deux alert() !!

Est-ce que je peux utiliser le SetAttribute !! Si oui, comment ??

09 mai 2007, 16:58

C'est assez compliqué alors je vais m'orienter vers 3 DIV différentes et en fonction de mon choix je vais montrer une et caché les deux autres !!

je vais faire un truc et faire un display:none pour les DIV que je ne veux pas voir !! ...
C'est barbare mais ça marche !!!

09 mai 2007, 18:12

J'ai fait quelque chose mais j'ai du me planter quelque part parceque ça marche pas bien .... est-ce que vous avez une idée du hic qui peut y avoir !!

Code : Tout sélectionner

<Script>
function test () {
    if (document.getElementById("idSemaine").checked) {
            document.getElementById("idDateDebutW").style.display ="hidden" ;
	    document.getElementById("idDateDebutM").style.display ="none" ;
	    document.getElementById("idDateDebutY").style.display ="none" ;
    } else if (document.getElementById("idMois").checked) {
	    document.getElementById("idDateDebutW").style.display ="none" ;
	    document.getElementById("idDateDebutY").style.display ="none" ;
	    document.getElementById("idDateDebutM").style.display ="hidden" ;
    } else if (document.getElementById("idAnnee").checked) {
	    document.getElementById("idDateDebutW").style.display ="none" ;
	    document.getElementById("idDateDebutM").style.display ="none" ;
	    document.getElementById("idDateDebutY").style.display ="hidden" ;
    }
}
<script>
...
<td>
    <div class="ecwCalendar" ecwPattern="%Y-%W" id="idDateDebutW" style="display:none">
          <input type="text" value="" name="debutW"/>
     </div>
     <div class="ecwCalendar" ecwPattern="%Y-%m" id="idDateDebutM" style="display:none" >
          <input type="text" value="" name="debutM"/>
     </div>
     <div class="ecwCalendar" ecwPattern="%Y" id="idDateDebutY" style="display:hidden" >
          <input type="text" value="" name="debutY"/>
     </div>
</td>
...

Merci !!!

09 mai 2007, 23:21

Mais sans utiliser les 3 Div, je ne vois pas pourquoi t'as subittement changer de technique. Tu utilise setAttribute() pour fixer tes valeurs selon le bouton checké.

Exemple:

Code : Tout sélectionner

<script language="Javascript">
function test() {
    //mise à jour de l'attribut ecwPattern 
   		if (document.getElementById("idSemaine").checked)
           document.getElementById("idDateDebutCal").setAttribute("ecwPattern", "%Y-%W");
    	else if (document.getElementById("idMois").checked)
           	document.getElementById("idDateDebutCal").setAttribute("ecwPattern", "%Y-%m");       
    		else if (document.getElementById("idAnnee").checked) 
           		document.getElementById("idDateDebutCal").setAttribute("ecwPattern", "%Y");
	//vérif
	alert ("ecwPattern = " + document.getElementById("idDateDebutCal").getAttribute("ecwPattern"));
}
</script>
<body>
<form name="echelle">
<table border="0" class="ecwBackgroundIhm" cellspacing="0" cellpading="0">
  <tr>
    <td class="ecwBodyIhm" align="center">
      <table border="0" cellspacing="2" cellpadding="2" >
        <tr>
          <td align="right"><label id='sem'>Semaine</label> 
            <input type='radio' id='idSemaine' name='echel' value='%Y' checked /><br>
         </td> 
         <td width="25"></td> 
         <td align="right"><label id='moi'>Mois</label> 
           <input type='radio' id='idMois' name='echel'  value='%Y-%M' />
         </td> 
         <td width="25"></td> 
         <td align="right"><label id="ann" for="idAnnee">Année</label>
           <input type="radio" value="%Y" id="idAnnee" name="echel" /> 
         </td>
         <td><input id="boutton" type="button" onclick="test()"/></td>   
       </tr> 
     </table> 
   </td>
  </tr>
</table>
<div class="ecwCalendar" ecwPattern="%Y-%m" id="idDateDebutCal" >
    <input type="text" value="" name="debut"/>
</div> 
</form>
</body>

10 mai 2007, 09:34

J'ai changé parceque ça ne marche pas pas ...
Lorsque je clique sur le bouton, je récupère bien la valeur de ma checkbox ...
Puis le alert () qui permet de connaitrel a valeur de l'attribut ecwPattern a bien changé ... mais lorsque je clique sur ma DIV ... il récupère la valeur d'origine !!!

10 mai 2007, 10:48

Merci pour tes propositions mais je ne sais pas pourquoi mais elle ne fonctionne pas donc je me suis rabutu sur ma deuxième solution !!

J'ai trouvé pourquoi cela ne fonctionnait pas ... c'est parceque j'instenciais l'état de display dans mes DIV ...

Mais j'ai un autre problème ... il n'arrive pas à comprendre le dislay:none et display:visible ! ??

10 mai 2007, 11:11

Code : Tout sélectionner


<Script>
function test () {
    if (document.getElementById("idSemaine").checked) {
       document.getElementById("idDateDebutW").style.display ="inline" ;
       document.getElementById("idDateDebutM").style.display ="none" ;
       document.getElementById("idDateDebutY").style.display ="none" ;
    } else if (document.getElementById("idMois").checked) {
       document.getElementById("idDateDebutW").style.display ="none" ;
       document.getElementById("idDateDebutY").style.display ="none" ;
       document.getElementById("idDateDebutM").style.display ="inline" ;
    } else if (document.getElementById("idAnnee").checked) {
       document.getElementById("idDateDebutW").style.display ="none" ;
       document.getElementById("idDateDebutM").style.display ="none" ;
       document.getElementById("idDateDebutY").style.display ="inline" ;
    }
}
<script>
...
<td>
    <div class="ecwCalendar" ecwPattern="%Y-%W" id="idDateDebutW" style="display:none">
          <input type="text" value="" name="debutW"/>
     </div>
     <div class="ecwCalendar" ecwPattern="%Y-%m" id="idDateDebutM" style="display:none" >
          <input type="text" value="" name="debutM"/>
     </div>
     <div class="ecwCalendar" ecwPattern="%Y" id="idDateDebutY" style="display:inline" >
          <input type="text" value="" name="debutY"/>
     </div>
</td>
...

Voilà j'ai réussi à débloquer tout ça .... Merci pour l'aide de Sadeq, Ryle, guilt92 et Cyrano !!!

récupération de la valeur d'une checkbox coché + caché DIV

Qui est en ligne