[DOM] Tableau de calcul en javascript

Version imprimable

Bonjour,

j'ai besoin de vos lumières pour un exercice :

Je souhaiterais faire un tableau où on aurait un produit (avec un prix et un poids défini dans deux colonnes distinctes), on choisit la quantité dans une autre colonne et dans les deux dernières on y trouve le poids total et le prix total (suivant la quantité choisie).

Je me sers de la formule suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <head> <script language="javascript"> function popbs() { window.document.formulaire.ptpb.value = document.formulaire.popb.value * 370 ; } function prpbs() { window.document.formulaire.prtpb.value = document.formulaire.popb.value * 6 ; } </script> </head> <body> <td align="center"><input type="text" name="popb" size="3" onkeyup="popbs()"> </td> <td align="center"><input type="text" name="ptpb" size="8" disabled="disabled" > g</td> <td align="center"><input type="text" name="prtpb" size="8" disabled="disabled" > g</td> </body>
J'arrive à faire le premier calcul : celui qui fait : quantitéx370g = poids total
Mais impossible de faire l'autre. En fait, c'est que je n'arrive pas à combiner deux fonctions pour un formulaire : quand je les mets séprament ça va... Comment faire en sorte que la case pour la quantité soit utilisée pour deux calculs ?

Merci

17/03/2009, 20h05
Auteur
bonjour,

La valeur contenue dans un input (quel qu'il soit) ou un textarea est une chaine de caractères. Donc il faut transformer cette chaine en nombre en utilisant parseInt() ou parseFloat() :
Code:

1 2 document.formulaire.ptpb.value = parseFloat(document.formulaire.popb.value) * 370 ;
17/03/2009, 20h34
SpaceFrog

il sera aussi plus élégant (et crossbrowser) d'utiliser une syntaxe plus correcte:

Code:

document.forms['formulaire'].elements['ptpb'].value

n'oublie pas de preciser également la base du parse (par defaut sous IE par exemple elle est à 8)
17/03/2009, 21h06
Auteur

[QUOTE=SpaceFrog;4119782]il sera aussi plus élégant (et crossbrowser) d'utiliser une syntaxe plus correcte:

Code:

document.forms['formulaire'].elements['ptpb'].value

ou document.getElementById() ;=

Citation:

Envoyé par SpaceFrog

n'oublie pas de preciser également la base du parse (par defaut sous IE par exemple elle est à 8)

IE travaille en base 8 8O. J'aurai appris quelque chose :ccool:
Maintenant si mariepierre utilise parseFloat() je ne pense pas qu'il faille préciser la base ;)
18/03/2009, 06h54
Bovino

Citation:

Envoyé par SpaceFrog

(par defaut sous IE par exemple elle est à 8)

Uniquement si le chiffre en question commence par 0 il me semble ?

merci pour vos réponses, cependant cela ne marche toujours pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function popbs() { window.document.formulaire.ptpb.value = parseFloat(document.formulaire.popb.value) * 370 ; } 
function prpbs() { window.document.formulaire.prtpb.value = document.formulaire.popb.value * 6 ; }
 
 
<tr bgcolor="#f6f1e0">
    <td><img src=" "></td>
    <td><strong>Petit brebis</strong></td>
    <td align="center">370g</td>
    <td align="center">6,00 €</td>
    <td align="center"><input type="text" name="popb" size="3" onkeyup="popbs()" onKeyUp="prpbs()"> </td>
    <td align="center"><input type="text" name="ptpb" size="8" disabled="disabled" onkeyup="pts()" > g</td>
    <td align="center"><input type="text" name="prtpb" size="8" disabled="disabled" > euros</td>
  </tr>

C'est au niveau de la gestion de deux fonctions non qu'il y a un problème ?

18/03/2009, 15h05
Bovino

Code:

<td align="center"><input type="text" name="popb" size="3" onkeyup="popbs();prpbs()"> </td>

si tu mets 2 fois onkeyup, le 2e annule le 1er :roll:
18/03/2009, 15h39
mariepierre

oui ça je m'en doute mais c'est pour vous montrer qu'il faut que cette case "appelle 2 fonctions".
Elle doit servir pour calculer le poids total et le prix total...
J'ai essayé le et "and", "&" mais ça ne marche pas
18/03/2009, 16h26
SpaceFrog

aller je te fais cadeau d'un point virgule ... tiens ;
18/03/2009, 18h05
Bovino

Citation:

Envoyé par SpaceFrog

aller je te fais cadeau d'un point virgule ... tiens ;

Ah... comme dans la ligne que j'ai proposée ?
:D
18/03/2009, 18h11
mariepierre

quelle idiote..... :oops::oops:
excusez moi, j'étais tellement démoralisée....
j'essaie et je vous tiens au courant !
Merci

re moi...

pas besoin de vous dire que ça marche, vous vous en doutiez...

mais maintenant j'ai un autre soucis... :
donc j'obtiens un poids total par rapport à la quantité et pareil pour le prix.
Maintenant, j'aimerais que tous les "poids total" s'ajoutent pour obtenir un poids final.
j'ai essaye ça :
Code:

1 2 3 4 5 6 7 8 9 10 function pts() { window.document.formulaire.pt.value = parseFloat(document.formulaire.ptpb.value) + parseFloat(document.formulaire.ptt.value) + parseFloat(document.formulaire.ptc.value) + parseFloat(document.formulaire.ptpf.value) + parseFloat(document.formulaire.ptbp.value) + parseFloat(document.formulaire.ptbf.value); }  <input type="text" name="ptbf" size="8" disabled="disabled" onkeyup="pts()">  <input type="text" name="pt" size="8" disabled="disabled" >
inutile de vous dire que ça ne marche pas....
où est mon erreur ?

18/03/2009, 20h20
SpaceFrog

disabled et onkeyup ne font pas bon ménage ?
essaye readonly à la place
19/03/2009, 12h54
mariepierre

readonly à la place de disabled ne marche pas non plus.

Est-ce que ce ne serait pas un problème de réappropriation des données fournies automatiquement ? = Est-ce que le problème ne vient pas du fait que je demande un calcul automatique avec comme coefficient des résultats d'autres calculs auto ?
19/03/2009, 13h25
SpaceFrog

je te renvoie à cette intervention:
http://www.developpez.net/forums/d70...t/#post4119873
19/03/2009, 13h35
mariepierre

donc il faut que je mette :

Code:

document.forms['formulaire'].elements['ptpb'].value

ça donnerait ça par exemple?

Code:

function pts() { window.document.formulaire.pt.value = document.forms['formulaire'].elements['ptpb'].value * 20; }
19/03/2009, 14h31
SpaceFrog

là aussi

Code:

window.document.formulaire.pt.value

donc :

Code:

1
2
3
 
 
document.forms['formulaire'].elements['pt'].value = document.forms['formulaire'].elements['ptpb'].value * 20; }

c'est ça ?

19/03/2009, 15h22
SpaceFrog

si tu n'as qu'un seul pts sur la page .. oui

sinon passe par les id

ça ne marche pas.

je mets comme fonction :
Code:

1 2 function pts() { document.forms['formulaire'].elements['pt'].value = document.forms['formulaire'].elements['ptbf'].value * 20;
donc je dis pour tester que le formulaire nommé pt doit prendre la valeur du formulaire (résultat d'un calcul automatique) nommé ptbf. C'est bien ça ?

et après voici le code :
Code:

1 2 3 4 <td align="center"><input type="text" name="ptbf" size="8" disabled="ReadOnly" onkeyup="pts()"> g</td> <td align="center" bgcolor="#CCFF99"><input type="text" name="pt" size="8" disabled="disabled" > g</td>
où est mon erreur, je ne comprends pas là....

20/03/2009, 20h02
SpaceFrog

tu es bien dans un form ... ?
si ou c'est le table qui masque tes elements pour le DOM

colle leur des id et passe par document.getElementById
20/03/2009, 20h14
mariepierre

bon j'ai résolu mon problème...
quand on sait pas coder faut savoir être malin...

pour ceux qui auront le même problème je résume :
mon problème final était de faire une addition des valeurs de case obtenues automatiquement à partir d'autres calculs. je n'ai pas réussi en prenant ce résultat alors j'ai refais un calcul à part.

Exemple :
prix = 3 , quantité = 1 , prixtotal = prix x quantité
prix1 = 4 , quantité1 = 1 , prixtotal1 = prix1 x quantité1
....
prixfinal = prixtotal + prixtotal1 + .... (NE MARCHAIT PAS)

ALORS :

prix final = (prix x quantité) + (prix1 x quantité1) + ...

J'espère avoir été assez claire...
c'est pas très élégant mais bon... si jamais j'arrive à résoudre le problème autrement....

merci beaucoup pour votre aide et vos conseils.

je ne mets pas tout de suite le post en résolu au cas où....
21/03/2009, 08h40
mariepierre

Re moi.

maintenant j'ai un problème pour envoyer le résultat des champs automatiques via un script d'envoi basique en php.

ça coince avec le "disabled" (qu'il ait en propriété "disabled" ou "read only").
quand je l'enlève ça va... mais je suis obligée de le laisser sinon le résultat est modifiable
21/03/2009, 10h07
SpaceFrog

jette un oeil sur les champs hidden ...
21/03/2009, 12h37
Walterbelo

Ou bien je ne comprends rien à rien...

Pourquoi ne pas appeler la fonction "poids" à partir de la fonction "prix" ? :oops:
21/03/2009, 16h05
mariepierre

Citation:

Envoyé par SpaceFrog

jette un oeil sur les champs hidden ...

je ne comprends pas
21/03/2009, 21h40
Auteur

Tu as des input de type hidden :

Code:

<input type="hidden" value="valeur cachée" id="inputHidden" />

Tu peux y placer tout ce que tu veux : par exemple le résultat intermédiaire d'un calcul.
Ces champs ont la particularité d'être cachés, ils sont totalement invisibles sur la page.
22/03/2009, 07h47
mariepierre

on peut y placer le résultat d'un calcul automatique ?
22/03/2009, 12h52
Auteur

Citation:

Envoyé par mariepierre

on peut y placer le résultat d'un calcul automatique ?

Tu peux y mettre tout ce que tu veux ;) L'input hidden a les mêmes propriétés qu'un input text sauf qu'il est invisible.