Erreur de retour JS d'une checkbox

Version imprimable

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:

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:

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

11/06/2020, 18h03
javatwister

Prenons ta 3e ligne de html, par exemple:

Code:

<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...
11/06/2020, 18h48
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...

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

Je te propose:

Code:

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:

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;

12/06/2020, 10h28
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:

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

et dans la fonction
Code:

1 2 3 4 function MaJProgMois(obj){ const param = "mois=" + obj.value + "&index=" + obj.id + "&check=" + obj.checked; // le reste du code }
12/06/2020, 12h20
azimut2000
Citation:

Envoyé par NoSmoking

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 ;-)
Citation:
Envoyé par NoSmoking

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:

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

et dans la fonction

Code:

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 :D :mouarf:
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 :ptdr: )

Thierry