Calcul total sous-total

Signaler
Messages postés
10
Date d'inscription
lundi 24 octobre 2005
Statut
Membre
Dernière intervention
14 mars 2009
-
Messages postés
10
Date d'inscription
lundi 24 octobre 2005
Statut
Membre
Dernière intervention
14 mars 2009
-
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>

<form method=POST name="bdc_village" action=formmail.php>

    <!-- tab1 -->
        ----
            <table class="produits" border="0" cellpadding="0" cellspacing="0" align="right">

<!-- tab rose -->
        ----,
            <table class=\"produits\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"right\">
                ----

                                            <table class="bandeau" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
                            ----

                                , Recettes Bio Terroir </td>
                                Verrine 160g par conditionnement de 12,
                            
                        
                    </td>
                </tr>

                <tr>
                  <td>
                                                    ----

                                 Réf. |
                                Recettes |
                                PU |
                                Quantité |
                                Total |
                            

                            ----

                                6000,
                                Terrine Campagnarde aux Oignons doux,
                                &euro;,
                                ,
                                ,
                            

                            ----

                                6007,
                                Terrine Forestière aux Champignons,
                                &euro;,
                                ,
                                ,
                            

                            ----

                                6005,
                                Terrine Cévenole aux Châtaignes ,
                                &euro;,
                              ,
                                ,
                            
                            
                            ----

                                6001,
                                Terrine Provencale  Tapenade d'Olive de Nyons ,
                                &euro;,
                                ,
                                ,
                            
                            
                            ----

                                6006,
                                Terrine du Larzac au Fromage de brebis &amp; Basilic ,
                                &euro;,
                                ,
                                ,
                            
                            
                            ----

                                6003,
                                Terrine de Montagne  Fromage de chèvre &amp; Thym ,
                                &euro;,
                                ,
                                ,
                            
                            
                            ----

                                6004,
                                Terrine Aveyronnaise au Roquefort &amp; Noix ,
                                &euro;,
                                ,
                                ,
                                                                                                                                            

                            ----

                                &nbsp;,
                                Sous-Total Terroir verrine,
                                &nbsp;,
                                &nbsp;,
                                ,
                            
                        
                  </td>
                </tr>
            </table>
        </td></tr>
<!-- fin rose -->

<!-- bleu-->            

            </table>
        </td></tr>
<!-- fin tab bleu -->

        </tr>
  </table>

</form>

</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;
}

9 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
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]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
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 mon Site][M'écrire]
Messages postés
10
Date d'inscription
lundi 24 octobre 2005
Statut
Membre
Dernière intervention
14 mars 2009

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
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
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]
Messages postés
10
Date d'inscription
lundi 24 octobre 2005
Statut
Membre
Dernière intervention
14 mars 2009

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 ?
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
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]
Messages postés
10
Date d'inscription
lundi 24 octobre 2005
Statut
Membre
Dernière intervention
14 mars 2009

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 ?
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
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]
Messages postés
10
Date d'inscription
lundi 24 octobre 2005
Statut
Membre
Dernière intervention
14 mars 2009

oui, oui !!!!!
Mais j'ai tout de même compris ton explication donc merci beaucoup pour tout !!!