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 ?
Code : Tout sélectionner
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">
<!-- tab1 -->
<tr><td>
<table class="produits" border="0" cellpadding="0" cellspacing="0" align="right">
<!-- tab rose -->
<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>
<!-- fin rose -->
<!-- bleu-->
</table>
</td></tr>
<!-- fin tab bleu -->
</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;
}
