Discussion :

[azimut2000]

Bonjour,

Cela fait 3 jours que je traîne ce boulet et je ne comprend pas pourquoi cela ne fonctionne pas... J'ai bien chercher dans ce forum ou sur Google si un début de réponse pouvait m'aider, mais je n'ai rien trouvé... Je me tourne donc vers vous.

Contexte : je génère en PHP un morceau de page WEB que j'insère dans une DIV de ma page principale; ce morceau de code généré est sous cette forme :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<td colspan="2" style="border:none;">
        <input type="checkbox" name="mois_1" id="mois_1" value="1" onchange="MaJProgMois(value, 1);" checked="checked">Janvier 
        <input type="checkbox" name="mois_1" id="mois_2" value="2" onchange="MaJProgMois(value, 1);" checked="checked">Février 
...
        <input type="checkbox" name="mois_1" id="mois_11" value="11" onchange="MaJProgMois(value, 1);">Novembre 
        <input type="checkbox" name="mois_1" id="mois_12" value="12" onchange="MaJProgMois(value, 1);">Décembre 
</td>

Dans ma page principale - qui à donc "chargé" ce morceau de code - j'ai plusieurs fonctions JavaScript qui réalisent différentes choses, dont une qui est appelé si une checkbox a chang d'état (cochée ou décochée - on le voit dans le code ci-dessus : "onchange..." qui appel la fonction MaJProgMois() ).
Ce code JavaScript est le suivant :

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
      function MaJProgMois(valeur, id) {
 
        var str = "document.getElementsByName('mois_"+id+"')[" + valeur + "].checked";
        var check = eval(str);
 
        alert(str);
        alert(check);
 
        if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
          alert("Votre navigateur ne supporte pas les fonctionnalités AJAX (=objets XMLHTTPRequest)..."); 
          return; 
        }
        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var retour = xmlhttp.responseText;
            document.getElementById("Debug").innerHTML = retour;
          }
        }
        xmlhttp.open("GET", "getMaJProgMois.php?mois="+valeur+"&index="+id+"&check="+check, true);
        xmlhttp.send();
      }

Mon problème est que l'évaluation de ma chaine "document.getElementsByName("mois_1")[1].checked" par exemple, me renvoie toujours l'état initial de la case tel que décrit dans le code généré en PHP et non l'état que l'utilisateur donne à la checkbox.

Je ne comprend pas pourquoi ! C'est pourtant "simple" JavaScript mais là, je ne vois pas pourquoi cela ne fonctionne pas... alors que dans la console JavaScript de mon Firefox, lorsque je lance un document.getElementsByName('mois_1')[1].checked par exemple, il me renvoie bien le bon booleen "true" ou "false"...

Quelqu'un aurait il une idée ou une piste à me soumettre ? et en même temps sur quoi devrais-je partir pour avoir la bonne valeur dès qu'un clic change la checkbox

En vous remerciant tous,

Thierry

[javatwister]

Prenons ta 3e ligne de html, par exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="checkbox" name="mois_1" id="mois_1" value="1" onchange="MaJProgMois(value, 1);" checked="checked">Janvier

value est undefined...; le paramètre ne correspond à rien dans ta page, quoi...

[azimut2000]

???

Pourtant value me renvoie bien quelque chose sur ma fonction MaJProgMois()... Je récupère dans ce cas la "1"

Idem si j'actionne la checkbox sur la ligne <input type="checkbox" name="mois_1" id="mois_2" value="2" onchange="MaJProgMois(value, 1);" checked="checked">Février : j'ai bien un retour de value qui me donne "2" dans ce cas là...
Le problème ne me semble pas situé au niveau des valeurs qui sont renvoyées à la fonction, mais au code dans la fonction elle-même qui n'arrive pas à interpréter correctement la chaine "document.getElementsByName('mois_1')[2].checked" si on reste sur le mois de février par exemple !

Cela fonctionne dans la console JavaScript de mon navigateur, le retour se fait bien à "true" quand je coche ou que la checbox est déjà cochée et à "false" si la checkbox est décochée ou si je la décoche.
Je me dis donc que je tape bien sur les bons objets de la page... Alors pourquoi en transposant cette interrogation dans une fonction de ma page, cela ne fonctionne plus ???

Je ne saisie pas là du coup ta réponse...

[javatwister]

Bon, c'est vrai, je n'avais pas vu le reste;

Je te propose:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<label><input type="checkbox" name="mois_1" id="mois_1" value="1" checked /> Janvier</label> 
<label><input type="checkbox" name="mois_1" id="mois_2" value="2" checked /> Février</label> 
<label><input type="checkbox" name="mois_1" id="mois_11" value="11" /> Novembre</label> 
<label><input type="checkbox" name="mois_1" id="mois_12" value="12" /> Décembre</label>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.getElementsByName('mois_1').forEach(v=>{
	v.addEventListener("change",()=>{
		console.log(v.id, " est-elle cochée? :", v.checked, "=>", v.value)
	})
})

Fais F12 et regarde le résultat;

[NoSmoking]

Bonjour,
il y a des choses à dire comme :
Attention les indices commence à 0 et non à 1 !

ou encore :
la valeur de value passée en paramètre, alors que non explicitement déclarée, se rapporte à la value de l'input par défaut si existe, c'est comme si on écrivait this.value, ce qui est d'ailleurs bien mieux, pour qu'il n'y ait pas d’ambiguïté.
Le plus simple reste quand même, outre l'affectation en dehors du code HTML, de passer le this à la fonction et de gérer cela dans la fonction.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="checkbox" name="mois_1" id="mois_1" value="1" onchange="MaJProgMois(this);" checked="checked">Janvier

et dans la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function MaJProgMois(obj){
  const param = "mois=" + obj.value + "&index=" + obj.id + "&check=" + obj.checked;
  // le reste du code
}

[azimut2000]

il y a des choses à dire comme :
Attention les indices commence à 0 et non à 1 !

Oui, oui... Cela est pris en charge ailleurs dans le code JS ;-)

la valeur de value passée en paramètre, alors que non explicitement déclarée, se rapporte à la value de l'input par défaut si existe, c'est comme si on écrivait this.value, ce qui est d'ailleurs bien mieux, pour qu'il n'y ait pas d’ambiguïté.
Le plus simple reste quand même, outre l'affectation en dehors du code HTML, de passer le this à la fonction et de gérer cela dans la fonction.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="checkbox" name="mois_1" id="mois_1" value="1" onchange="MaJProgMois(this);" checked="checked">Janvier

et dans la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function MaJProgMois(obj){
  const param = "mois=" + obj.value + "&index=" + obj.id + "&check=" + obj.checked;
  // le reste du code
}

Ah ba ça fonctionne mieux ainsi
Quand j'ai écrit tout cela je devais pas être réveillé

Merci beaucoup à vous deux pour vos réponses...
Parfois, un oeuil averti en vaut plus que 4 (oui car on était quand même 2 à regarder ce qui se passait )

Thierry