Discussion :

[Pallando]

Bonjour, j’ai un problème lié aux radios buttons en JavaScript.
Je suis loin d’être un expert en la matière.

J’ai un champs pour rentrer un poids, à coté deux radio Button (Kilo,pounds) dans un groupe.
Avec un Onclick qui change la valeur du champ de kilo à pounds en divisant ou multipliant.

100 ● kilos ○ pounds
220 ○ kilo ● pounds

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
onclick="javascript:cm_to_inchesVal('height');"
 
function kg_to_pounds(field) {
	var convert;
	var weight = parseInt(document.getElementById (field).value);
	if (!isNaN(weight)) {
		convert = Math.round(weight * kgTolbs);
		if (convert == 0)
			document.getElementById (field).value = "";
		else
			document.getElementById (field).value = convert;
	} else {
		document.getElementById (field).value = "";
	}
}

Problème :
Tout fonctionne bien tant que l’utilisateur alterne les clicks sur les radios bouttons.
Évidemment, avec le onclick, quand je clique plusieurs fois de suite sur un des radios boutons la valeur affichée continue de se multiplier (ou de se diviser).
Comment faire pour que mon script ne soit appelé que si le boutton a réellement été switché ? (Avec la souris et le clavier)



Solutions que j’ai (mal ?) essayées:
J’ai remplacé le onclick par onchange qui ne fonctionne pas sous IE.

Code :

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

onchange="javascript: kg_to_poundsVal (‘weight’);"

J’ai ajouté un setTimeOut au onchange qui ne fonctionne pas mieux sous IE.

Code :

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

onchange=”javascript:setTimeout(function(){kg_to_pounds('weight'),100});”

J’ai écrit une nouvelle fonction JavaScript (kg_to_poundsVal) pour tester la valeur du radio Boutton et faire la conversion uniquement si celui-ci a réellement changé mais d’après ce que j’ai pu voir, le onlick est « raisé » après que le boutton a changée. Du coup le radioButton sur lequel je viens de cliquer est toujours checked.

Code :

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

1
2
3
4
5
6
7
8
onclick="javascript: kg_to_poundsVal (‘weight’);"
 
 
function kg_to_poundsVal(value){
	if (!document.formRequestDetailForm.heightUnit[1].checked){
		kg_to_pounds (value);
		}
	}

J’ai remplacé onclick par onmousdown qui lui est raisé avant le changement (qui résou le problème ci-dessus). Fonctionne bien avec la souris mais pas en cas de navigation au clavier.

Du coup je suis un peu bloqué.

Que dois-je faire ?

[Bovino]

Tu pourrais montrer le code html de tes boutons.
A priori ton problème vient de là. Il faut leur donner le même name et ensuite vérifier lequel est checked.

[Pallando]

On utilise des taglibs perso donc je te donne le résultat HTML

C'est justement le fait de regarder lequel est checké qui ne fonctionne pas puisque la valeur a déjà changée quand j'arrive dans le JavaScript.
Je voudrai connaitre celui qui était True AVANT le clic en fait.

Code :

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

1
2
3
4
5
6
7
 
 
<input name="weight" maxlength="3" size="5" tabindex="47" value="" id="weight" class="TB" type="text">
<input name="weightUnit" tabindex="48" value="Y" checked="checked" onclick="javascript:pounds_to_kg('weight');" id="weightUnit" type="radio">
kg
<input name="weightUnit" tabindex="49" value="N" onclick="javascript:kg_to_pounds('weight');" id="weightUnit" type="radio">
pounds

[Bovino]

Pour ça tu peux utiliser un attribut "value" à tes input que tu modifies au click

[Pallando]

effectivement c'est la solution que je cherchait.
Merci beaucoup