11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
j'ai une fonction javascript très simple qui permet de faire une multiplication de 2 valeurs dans des cellules et calculer le résultat.
Elle marche très bien sous IE, mais pas sous Firefox. Je pense que Firefox ne reconnait pas l'évènement onChange.

Voici le code de la fonction :
<script type="text/javascript">
<!--
function calcul() 
{
tot = eval(document.formulaire.champ1.value) * eval(document.formulaire.champ2.value);
total.innerHTML = tot ;
}
//-->
</script>


et le formulaire :

<form id="formulaire" name="formulaire" method="post" action="traitement.php">
<input type="text" name="champ1" value="0" size="4" onChange="calcul()" /><input type="text" name="champ2" value="0" size="4" onChange="calcul()" /><div id="total">0</div>
</form>


Merci de votre aide !
Modifié par BearWithNoHead (27 Nov 2008 - 16:16)
Modérateur
Salut,

Le mieux serait d'ajouter un bouton de soumission pour faire le calcul si tu veux que tout le monde en dispose, ce calcul pouvant être fait côté serveur.

Après, si tu veux améliorer l'ergonomie en évitant la soumission du formulaire, tu peux, par exemple, ajouter une surcouche js qui permet d'effectuer le calcul en annulant la soumission du formulaire ou en faisant une requête ajax à la place, ce qui te permet de factoriser tes bouts de code.

ps: Avec eval, l'utilisateur peut insérer n'importe quel code néfaste pour ton application; mieux vaudrait passer par "parseInt" ou "parseFloat".

ps2: L'attribut "name" sur l'élément "form" est invalide en xhtml 1.0 Strict
Merci de ta réponse.

a écrit :
Le mieux serait d'ajouter un bouton de soumission pour faire le calcul si tu veux que tout le monde en dispose, ce calcul pouvant être fait côté serveur.

En fait, mon formulaire est beaucoup plus complexe que ca, là je l'ai simplifié à l'extrême par commodité. Evidemment il comporte un bouton de soumission... Mais je veux que les utilisateurs voient le résultat des données qu'ils ont entré, avant que le formulaire soit envoyé.
Mon probleme, c'est que la fonction JS ne s'execute tout simplement pas sous Firefox.

a écrit :
ps: Avec eval, l'utilisateur peut insérer n'importe quel code néfaste pour ton application; mieux vaudrait passer par "parseInt" ou "parseFloat".

Ok je vais regarder ca, je ne suis pas une star en Javascript, loin de là.

a écrit :
ps2: L'attribut "name" sur l'élément "form" est invalide en xhtml 1.0 Strict

OK merci pour l'info.
Salut,
j'ai résolu le problème. Voila la soluce pour ceux que ca peut interesser.
<script type="text/javascript">
<!--
function calcul() 
{
tot = eval(document.forms[0].elements["champ1"].value) * eval(document.forms[0].elements["champ2"].value); // La syntaxe document.forms[0].elements["nomduchamp"].value est préférable à document.formulaire.nomduchamp.value qui ne passe pas sous IE7
var total = document.getElementById('total'); // Firefox a besoin de getElementById pour trouver l'élément dans la page. IE a besoin que total soit déclaré en variable, car il ne comprend pas truc=document.getElementById('truc'); 
total.innerHTML = tot ; // et voila ! ca marche sur Firefox et sur IE
}
//-->
</script>

Merci de ton aide Koala 64.

a+