Calcul total sous-total - JavaScript Orienté objet (POO) / Function & Méthodes, Javascript / Ajax / DHTML

CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 00:48:20

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 951 membres
8 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 043 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Poser une question

Sujet : Calcul total sous-total [ JavaScript Orienté objet (POO) / Function & Méthodes ] (sakura151)

Informations & options pour cette discussion

Vous êtes ici : Thèmes / Javascript / DHTML / Ajax / JavaScript Orienté objet (POO) / Function & Méthodes / Calcul total sous-total
Ce sujet vous interesse ? Cliquez ici pour être averti quand il y a une nouvelle réponse

mercredi 8 octobre 2008 à 11:54:22 | Calcul total sous-total

sakura151

Bonjour,

Dans un tableau HTML, je dois calculer lors de l'entrée de la quantité, le sous-total est le total.
Voilà ce que j'ai fais... Mais il y a un problème : lorsque je change une quantité, le sous-total se met bien à jour mais le total ajoute la nouvelle quantité mais ne met pas à jour l'ensemble.
Je crois que je devrais passer tout en tableau ? Mais je suis débutante et ne sais pas comment faire ?
Dois-je vraiment passer en tableau ? Et comment cela se programme t-il ?

Source
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<title>Formulaire Commande Village du Larzac</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="village.js" type="text/javascript"></script>
</HEAD>
<body>

<form method=POST name="bdc_village" action=formmail.php>
<input type=hidden name=subject value=formmail>

   <table border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" id="content">


       <tr><td>
           <table class="produits" border="0" cellpadding="0" cellspacing="0" align="right">


       <tr><td>
           <table class="produits" border="0" cellpadding="0" cellspacing="0" align="right">
               <tr>
                   <td colspan="5">
                       <table class="bandeau" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
                           <tr class="fond_rose">
                               <td align="left" class="titre_tradition1"><img class="picto" src="images/picto_bio.jpg" />Recettes Bio Terroir <img class="picto" src="images/picto_bio.jpg" /></td>
                               <td align="right" class="titre_tradition2">Verrine 160g par conditionnement de 12</td>
                           </tr>
                       </table>                   </td>
               </tr>

               <tr>
                  <td>
                       <table class="produits_inside" border="0" cellpadding="0" cellspacing="0" align="center">
                           <tr class="titres">
                               <th class="lib_ref">Réf.</th>
                               <th>Recettes</th>
                               <th>PU</th>
                               <th>Quantité</th>
                               <th class="lib_tot">Total</th>
                           </tr>

                           <tr>
                               <td class="ref">6000</td>
                               <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_rose_6000.html')">Terrine Campagnarde aux Oignons doux</a></td>
                               <td class="prix"><input type="text" size="6" disabled="disabled" value="2.10" id="prixterroir1" />€</td>
                               <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir1" value="0" onChange="javascript:calcul_prix_terroir();javascript:calcul_total_prix_terroir()" /></td>
                               <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalterroir1"/></td>
                           </tr>

                           <tr>
                               <td class="ref">6007</td>
                               <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_rose_6007.html')">Terrine Forestière aux Champignons</a></td>
                               <td class="prix"><input type="text" size="6" disabled="disabled" value="2.30" id="prixterroir2" />€</td>
                               <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir2" value="0" onChange="javascript:calcul_prix_terroir();" /></td>
                               <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalterroir2"/></td>
                           </tr>

                           <tr>
                               <td class="ref">6005</td>
                               <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_rose_6005.html')">Terrine Cévenole aux Châtaignes </a></td>
                               <td class="prix"><input type="text" size="6" disabled="disabled" value="2.10" id="prixterroir3" />€</td>
                              <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir3" value="0" onChange="javascript:calcul_prix_terroir();" /></td>
                               <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalterroir3"/></td>
                           </tr>

                           <tr>
                               <td class="ref">6001</td>
                               <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_rose_6001.html')">Terrine Provencale Tapenade d'Olive de Nyons </a></td>
                               <td class="prix"><input type="text" size="6" disabled="disabled" value="2.20" id="prixterroir4" />€</td>
                               <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir4" value="0" onChange="javascript:calcul_prix_terroir();" /></td>
                               <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalterroir4"/></td>
                           </tr>

                           <tr>
                               <td class="ref">6006</td>
                               <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_rose_6006.html')">Terrine du Larzac au Fromage de brebis & Basilic </a></td>
                               <td class="prix"><input type="text" size="6" disabled="disabled" value="2.30" id="prixterroir5" />€</td>
                               <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir5" value="0" onChange="javascript:calcul_prix_terroir();" /></td>
                               <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalterroir5"/></td>
                           </tr>

                           <tr>
                               <td class="ref">6003</td>
                               <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_rose_6003.html')">Terrine de Montagne Fromage de chèvre & Thym </a></td>
                               <td class="prix"><input type="text" size="6" disabled="disabled" value="2.30" id="prixterroir6" />€</td>
                               <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir6" value="0" onChange="javascript:calcul_prix_terroir();" /></td>
                               <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalterroir6"/></td>
                           </tr>

                           <tr>
                               <td class="ref">6004</td>
                               <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_rose_6004.html')">Terrine Aveyronnaise au Roquefort & Noix </a></td>
                               <td class="prix"><input type="text" size="6" disabled="disabled" value="2.50" id="prixterroir7" />€</td>
                               <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir7" value="0" onChange="javascript:calcul_prix_terroir();" /></td>
                               <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalterroir7"/></td>
                           </tr>

                           <tr class="s-tot_grpe">
                               <td class="ref"> </td>
                               <td class="lib_s-tot">Sous-Total Terroir verrine </td>
                               <td class="prix"> </td>
                               <td class="qte"> </td>
                               <td class="val_tot"><input size="5" readonly="readonly" id="finterroir" value="0"/></td>
                           </tr>
                       </table>                  </td>
               </tr>
           </table>
       </td></tr>




           </table>
       </td></tr>


       </tr>
</table>

</form>

</body>
</html>

JS :

var dernierPrixterroir = 0;

function calcul_prix_terroir(){
   for(i=1;i<8;i++){
       nombreterroir=document.getElementById("nombreterroir"+i).value;
       prixterroir=document.getElementById("prixterroir"+i).value;
       prixTotalterroir=nombreterroir * (Math.round(prixterroir*100))/100;
       dernierPrixterroir = dernierPrixterroir + prixTotalterroir;
       document.getElementById("prix_totalterroir"+i).value=prixTotalterroir;
       document.getElementById("finterroir").value=(Math.round(dernierPrixterroir*100))/100;
   }
}

CSS :
/* -- Formulaire Bon de Commande village */

body {
background: #fff;
color: #000;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 62.8%;
height: 100%;
margin: 0;
width: auto;
}

table.produits {
width: 750px;
text-align: center;
border: 0px solid #e1e1e1;

margin-right: 7px;
}

table.produits_inside {
width: 748px;
margin: 5px auto;
}

table.produits tr.interl {
   line-height: 20px;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
}

table.produits tr.titres th {
font-weight: bold;
font-size: 14px;
line-height: 20px;
}

table.produits tr td {
font-size: 13px;
}

table.bandeau {
margin: 3px;
}

tr.fond_bleu {
   background-color: #82bfc2;
}


table.produits_inside tr td{
line-height: 24px;
}

table.produits_inside tr th, table.produits_inside tr td{
line-height: 24px;
border: 1px dotted #e1e1e1;
}

table.produits_inside tr.titres th {
border-top: none;
}

table.produits_inside tr th.lib_tot, table.produits_inside tr td.valeur, table.produits_inside tr td.val_tot {
border-right: none;
}

table.produits_inside tr th.lib_ref, table.produits_inside tr td.ref {
border-left: none;
}

table.produits_inside tr.s-tot_grpe td {
   border-bottom: none;
}

table.produits td.titre_tradition1 {
   font-size: 14px;
   font-weight: bold;
   padding-left: 5px;
   line-height: 27px;
   width: 60%;
   text-align: left;
   vertical-align: middle;
}

img.picto {
   vertical-align: middle;
   padding-left: 10px;
   padding-right: 10px;
}

table.produits td.titre_tradition2 {
font-size: 11px;
font-weight: bold;
padding-right: 5px;
line-height: 20px;
width: 38%;
}

td.ref {
width: 8%;
}

td.nom_recette {
text-align: left;
padding-left: 10px;
text-decoration: underline;
width: 60%;
}

td.nom_recette a {
color: #000;
}

td.prix {
color: #ff6c12;
font-weight: bold;
width: 10%;
}

td.prix input {
color: #ff6c12;
font-weight: bold;
text-align: right;

border: none;
}

td.qte {
width: 10%;
}

input {
border: 1px solid #000;
}

td.qte input {
height: 13px;
width: 30px;
vertical-align: middle;
text-align: center;
}

td.valeur, td.val_tot {
width: 12%;
}

td.valeur input, td.val_tot input {
border: none;
text-align: right;

width: 75px;
}

td.val_tot input {
font-weight: bold;
}

td.lib_s-tot {
text-align: left;
padding-left: 10px;
text-decoration: normal;
font-weight: bold;
}

tr.fond_rose {
   background-color: #cc5457;
}

mercredi 8 octobre 2008 à 12:15:25 | Re : Calcul total sous-total

bultez

bonjour,

et tu es sûr que tout ça nous était utile ? le css par exemple ? indispensable ?

>>Dois-je vraiment passer en tableau ?
tes tableaux tu les as déjà !
document.getElementByid("nombreterroir"+i )
document.getElementById("prixterroir"+i)

>>mais le total ajoute la nouvelle quantité mais ne met pas à jour l'ensemble.
pas compris ce que tu veux dire.

Cordialement

Bul[mon Site][M'écrire]

mercredi 8 octobre 2008 à 12:20:57 | Re : Calcul total sous-total

bultez

néanmoins, tu dois avoir une erreur de signalée....

... onChange="calcul_prix_terroir(); calcul_total_prix_terroir();" ... ça ira mieux

( et j'aurais plus fait
n=1;
while ( document.getElementById("nombreterroir"+i) )
{ calculs....
n++;
}

plutôt que le for. si on change le nombre de lignes, rien à modifier dans le script.

au fait :

Chrome	controler la page actuelle Options pour les développeurs Console Javascript
FireFox	regarder la "console d'erreurs" Outils / Console d'erreurs et mieux : télécharger FireBug
Internet Explorer	activer le deboggage : Outils/options Internet/Avancés dans la liste, sous "Navigation" : décocher o Afficher une notification de chaque erreur de script o Désactiver le débogage de Scripts (Internet Explorer) et mieux : télécharger le Debogger IE voir aussi : DebugBar et Companion JS
K-Meleon	regarder la "console d'erreurs" Outils / Console d'erreurs
Opera	regarder la "console d'erreurs" Outils / Avancé / Console d'erreurs
Safari	regarder Debug / Show JavaScript Console ° modifier Fichier Preferences.plist situé dans le répertoire : Support:\Documents and Settings\utilisateur \Application Data\Apple Computer\Safari\ y ajouter <key>IncludeDebugMenu</key> <true/>

Bul[mon Site][M'écrire]

mercredi 8 octobre 2008 à 14:06:23 | Re : Calcul total sous-total

sakura151

Oui, désolée pour le css et effectivement erreur : "calcul_total_prix_terroir();" n'a rien à faire là (c'était pendant un test)

Mais ce qui me pause un soucis c'est dans le calcul du total :
la première fois que l'on entre les quantité : tout va bien, par contre quand après on change un des quantité : le sous-total est correct mais le total est faux : il ajoute la nouvelle quantité mais ne recalcul pas tout

mercredi 8 octobre 2008 à 15:15:18 | Re : Calcul total sous-total

Zobibol

Bien le bonjour, c'est bien complexe pour faire une simple addition multiplication non ?

Essais avec cette méthode
function calcul_prix_terroir(){
    var dernierPrixterroir = 0;
    for(i=1;i<8;i++){
        var nombreterroir=document.getElementById("nombreterroir"+i).value;
        var prixterroir=document.getElementById("prixterroir"+i).value;
        var prixTotalterroir=nombreterroir * (Math.round(prixterroir*100))/100;
        document.getElementById("prix_totalterroir"+i).value=prixTotalterroir;
        dernierPrixterroir +=prixTotalterroir;
    }
    document.getElementById("finterroir").value = dernierPrixterroir;
}

et supprime la variable globale dernierPrixterroir, ça devrait marcher mieux
[o-_-o]

mercredi 8 octobre 2008 à 15:40:28 | Re : Calcul total sous-total

sakura151

Oui, ça marche beaucoup mieux en mettant la variable à l'intérieur de la fonction.

Mais avec ceci j'ai un autre problème : en fait je calcul 3 sortes de produits du style terroir et tout à la fin j'additionne ces 3 catégorie avec la fonction (avec un bouton calcul) :

function calcul_total(){

    var port = 15;
    total = (Math.round(dernierPrixterroir*100))/100 + (Math.round(dernierPrixvolaille*100))/100 + (Math.round(dernierPrixpoisson*100))/100;
    document.getElementById("total_achat").value =(Math.round(total*100))/100;

    if (total>300){
        port = 0;
        document.getElementById("port").value = port;
        document.getElementById("tot_ttc").value =(Math.round((total+port)*100))/100;
    }else{
        port = 15;
        document.getElementById("port").value = port;
        document.getElementById("tot_ttc").value =(Math.round((total+port)*100))/100;
    }
}

Et en mettant la variable à l'intérieur des fonctions précédentes mon total affiche 0, il n'additionne plus les 3 catégories ?

mercredi 8 octobre 2008 à 17:06:02 | Re : Calcul total sous-total

Zobibol

J'ai une idée....
En fait il faut que tu fasses 3 méthodes de calcul des prix
function calcul_prix_terroir(){
    var dernierPrixterroir = 0;
    for(i=1;i<8;i++){
        var nombreterroir=document.getElementById("nombreterroir"+i).value;
        var prixterroir=document.getElementById("prixterroir"+i).value;
        var prixTotalterroir=nombreterroir * (Math.round(prixterroir*100))/100;
        document.getElementById("prix_totalterroir"+i).value=prixTotalterroir;
        dernierPrixterroir +=prixTotalterroir;
    }
    document.getElementById("finterroir").value = dernierPrixterroir;
    return dernierPrixterroir;
}

et ensuite dans ta fonction de calcul :
function calcul_total(){
    var total = (Math.round(calcul_prix_terroir()*100))/100 + (Math.round(calcul_prix_volaille()*100))/100 + (Math.round(calcul_prix_poisson()*100))/100;
    document.getElementById("total_achat").value =(Math.round(total*100))/100;
    var port = (total>300) ? 0 : 15;
    document.getElementById("port").value = port;
    document.getElementById("tot_ttc").value =(Math.round((total+port)*100))/100;
}

cela fonctionnerait-il ?

[o-_-o]

mercredi 8 octobre 2008 à 17:19:26 | Re : Calcul total sous-total

sakura151	C'est magique, ça fonctionne !!! Merci beaucoup !! Petit complément d'info ? Suis vraiment débutante alors si je comprends bien c'est le return qui valide la dernière entrée ?
	Rép. MP 7 msg 11 msg CS

mercredi 8 octobre 2008 à 17:33:52 | Re : Calcul total sous-total

Zobibol	en fait le return te (attention la haute précision de l'explication ;o)) retourne la valeur du calcul (pas de commentaire). Je ne comprends pas trop ce que tu entends par :c'est le return qui valide la dernière entrée ? On va mettre ça sur le compte de la fatigue. [o-_-o]
	Rép. MP 341 msg 342 msg CS

mercredi 8 octobre 2008 à 17:51:39 | Re : Calcul total sous-total

sakura151	oui, oui !!!!! Mais j'ai tout de même compris ton explication donc merci beaucoup pour tout !!!
	Rép. MP 7 msg 11 msg CS

Cette discussion est classé dans : table, td, tr, width, produits

Répondre à ce message

Sujets en rapport avec ce message

Javascript : addition du contenu de 2 champs (2 chiffre à virgule) [ par sakura151 ] Bonjour,Débutante en javascript, je n'arrive pas à calculer mon total global (id="total_achat"), pouvez-vous me donner un coup de pouce ?JS:function c JSP & JAVASCRIPT [ par ratekratek ] Bonjour tt le monde,je suis debutant en j2ee et j travail sur struts et j ai rencontrer le problème suivant : je veux transformer le texte d'une zone problème insertion dans une table via appenchild [ par ludovicanceaux ] Salut à tous, j'ai un gros problème, car je voudrais remplir un tableau à l'aide des composants appenchild, etc.... et apparament ca me remplit mon ta Tableaux imbriqués [ par DAVIMIKA ] Bonjour, <p class="MsoNormal" st pb radios et affichage [ par kakol ] Bonjour, Voila j'ai un petit soucis avec des boutons et radio et l'affichage ou non d'une textbox. En effet j'ai 2 boutons radio "local" et "dista recupération des infos en une seule fois avec alerte [ par babylonne ] Bonjour tt le monde, voilà mon souci ce que je n'arrive pas à afficher mes informations saisi dans la fonction alert() (en une seule fois) et idem Envoi d'email à adresses récoltées [ par JeanTAF ] Bonjour,Je ne sais pas si quelqu'un pourra m'aider. Voilà, le site que je développe est hébergé par TRIPOD (Lycos) et pas de PHP possible sur leur sev Soucis de JS avec ie (6 et 7) No soucis avec FF( 1,2,3) ATTENTION NOOB INSIDE :) [ par Fabi3n ] Bonjour a tous.Voila ma première contribution dans le forum est pour demander de l'aide car je ne comprends pas grand chose au javascript (promis dema Recupérer la value d'un input généré via JS [ par caviar ] Re saluté ...Je suis encore sur la génération d'un formulaire avec autoincrémentation des lignes...j'ai trouvé un bon script qui me permet de générer [ JS + PHP ] Acceder a un champs de formulaire dans une boucle [ par Kirostaz ] bonjour à tous,mon problème est donc le suivant : j'ai un formulaire F_ajout avec les champs suivanttr>td>Choix 1 de la liste: </<span