Calcul total sous-total

sakura151 Messages postés 10 Date d'inscription lundi 24 octobre 2005 Statut Membre Dernière intervention 14 mars 2009 - 8 oct. 2008 à 11:54
sakura151 Messages postés 10 Date d'inscription lundi 24 octobre 2005 Statut Membre Dernière intervention 14 mars 2009 - 8 oct. 2008 à 17:51
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

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2008 à 12:15
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]
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2008 à 12:20
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]
0
sakura151 Messages postés 10 Date d'inscription lundi 24 octobre 2005 Statut Membre Dernière intervention 14 mars 2009
8 oct. 2008 à 14:06
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
0
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
8 oct. 2008 à 15:15
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]
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
sakura151 Messages postés 10 Date d'inscription lundi 24 octobre 2005 Statut Membre Dernière intervention 14 mars 2009
8 oct. 2008 à 15:40
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 ?
0
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
8 oct. 2008 à 17:06
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]
0
sakura151 Messages postés 10 Date d'inscription lundi 24 octobre 2005 Statut Membre Dernière intervention 14 mars 2009
8 oct. 2008 à 17:19
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 ?
0
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
8 oct. 2008 à 17:33
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]
0
sakura151 Messages postés 10 Date d'inscription lundi 24 octobre 2005 Statut Membre Dernière intervention 14 mars 2009
8 oct. 2008 à 17:51
oui, oui !!!!!
Mais j'ai tout de même compris ton explication donc merci beaucoup pour tout !!!
0
Rejoignez-nous