begin process at 2012 02 13 01:38:44
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Function & Méthodes

 > 

Javascript : addition du contenu de 2 champs (2 chiffre à virgule)


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Javascript : addition du contenu de 2 champs (2 chiffre à virgule)

lundi 22 septembre 2008 à 17:04:02 | Javascript : addition du contenu de 2 champs (2 chiffre à virgule)

sakura151

Membre Club
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 calcul_prix_terroir(){
var dernierPrixterroir = 0;
    for(i=1;i<10;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=dernierPrixterroir;
    }
}


function calcul_prix_volaille(){
var dernierPrixvolaille = 0;
    for(i=1;i<10;i++){
        nombrevolaille=document.getElementById("nombrevolaille"+i).value;
        prixvolaille=document.getElementById("prixvolaille"+i).value;       
        prixTotalvolaille=nombrevolaille * (Math.round(prixvolaille*100))/100;
        dernierPrixvolaille = dernierPrixvolaille + prixTotalvolaille;
        document.getElementById("prix_totalvolaille"+i).value=prixTotalvolaille;
        document.getElementById("finvolaille").value=dernierPrixvolaille;
    }
}

function calcul_prix_poisson(){
var dernierPrixpoisson = 0;
    for(i=1;i<10;i++){
        nombrepoisson=document.getElementById("nombrepoisson"+i).value;
        prixpoisson=document.getElementById("prixpoisson"+i).value;       
        prixTotalpoisson=nombrepoisson * (Math.round(prixpoisson*100))/100;
        dernierPrixpoisson = dernierPrixpoisson + prixTotalpoisson;
        document.getElementById("prix_totalpoisson"+i).value=prixTotalpoisson;
        document.getElementById("finpoisson").value=dernierPrixpoisson;
    }
}



function calcul_total(){
    alert ("Merci")
    total = dernierPrixterroir + dernierPrixvolaille + dernierPrixpoisson;
    document.getElementById("total_achat").value = total;
    document.getElementById("port").value = total + 10.5;
   
}


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 name="bdc_marmus" >

    <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">
           


        <tr class="interl"><td>&nbsp;</td></tr>



        <tr class="interl"><td>&nbsp;</td></tr>

<!-- 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">Recettes Bio Terroir </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" />&euro;</td>
                                <td class="qte"><input type="text" size="5" class="nombreterroir" id="nombreterroir1" value="0" onChange="javascript:calcul_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" />&euro;</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 class="s-tot_grpe">
                                <td class="ref">&nbsp;</td>
                                <td class="lib_s-tot">Sous-Total Terroir verrine </td>
                                <td class="prix">&nbsp;</td>
                                <td class="qte">&nbsp;</td>
                                <td class="val_tot"><input size="5" readonly="readonly" id="finterroir" value="0"/></td>
                            </tr>
                        </table>
                  </td>
                </tr>
            </table>
        </td></tr>
<!-- fin rose -->


<!-- tab orange -->
        <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_vert">
                                <td align="left" class="titre_tradition1">Recettes Bio Pur volaille </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">6102</td>
                                <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_orange_6102.html')">Terrine de Canard aux Figues</a></td>
                              <td class="prix"><input type="text" size="6" disabled="disabled" value="2.30" id="prixvolaille1" />&euro;</td>
                                <td class="qte"><input type="text" size="5" class="nombrevolaille" id="nombrevolaille1" value="0" onChange="javascript:calcul_prix_volaille();" /></td>
                                <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalvolaille1"/></td>
                            </tr>

                            <tr>
                                <td class="ref">6101</td>
                                <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_orange_6101.html')">Terrine de Canard aux Champignons des bois</a></td>
                                <td class="prix"><input type="text" size="6" disabled="disabled" value="2.40" id="prixvolaille2" />&euro;</td>
                                <td class="qte"><input type="text" size="5" class="nombrevolaille" id="nombrevolaille2" value="0" onChange="javascript:calcul_prix_volaille();" /></td>
                                <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalvolaille2"/></td>
                            </tr>


                            <tr class="s-tot_grpe">
                                <td class="ref">&nbsp;</td>
                                <td class="lib_s-tot">Sous-Total Pur Volaille verrine </td>
                                <td class="prix">&nbsp;</td>
                                <td class="qte">&nbsp;</td>
                                <td class="val_tot"><input size="5" readonly="readonly" id="finvolaille" value="0"/></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td></tr>
<!-- fin tab orange -->

<!-- bleu-->           
                <tr>
                    <td colspan="5">
                        <table class="bandeau" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
                            <tr class="fond_bleu">
                                <td align="left" class="titre_tradition1">Recettes Tradition</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">6200</td>
                                <!-- <td class="nom_recette"><a href="javascript:window.open('det_prod.html', 'det_prod', 'resizable=yes menubar=no, status=no, scrollbars=no, menubar=no, width=350, height=200')">Pâté de Campagne  pur Porc</a></td> -->

                                <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_bleu_6200.html')">Terrine de Truite au confit d'Espelette</a></td>
                                <td class="prix"><input type="text" size="6" disabled="disabled" value="2.75" id="prixpoisson1" />&euro;</td>
                                <td class="qte"><input type="text" size="5" class="nombrepoisson" id="nombrepoisson1" value="0" onChange="javascript:calcul_prix_poisson();" /></td>
                                <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalpoisson1"/></td>
                            </tr>

                            <tr>
                                <td class="ref">6300</td>
                                <td class="nom_recette"><a href="javascript:ouvre_popup('det_prod_bleu_6300.html')">Terrine Saumon de fontaine au Citron &amp; Gingembre</a></td>
                                <td class="prix"><input type="text" size="6" disabled="disabled" value="2.80" id="prixpoisson2" />&euro;</td>
                                <td class="qte"><input type="text" size="5" class="nombrepoisson" id="nombrepoisson2" value="0" onChange="javascript:calcul_prix_poisson();" /></td>
                                <td class="valeur"><input type="text" size="8" readonly="readonly" id="prix_totalpoisson2"/></td>
                            </tr>



                            <tr class="s-tot_grpe">
                                <td class="ref">&nbsp;</td>
                                <td class="lib_s-tot">Sous-Total Poisson verrine </td>
                                <td class="prix">&nbsp;</td>
                                <td class="qte">&nbsp;</td>
                                <td class="val_tot"><input size="5" readonly="readonly" id="finpoisson" value="0"/></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td></tr>
<!-- fin tab bleu -->





<!-- pave calcul -->
        <tr><td>
            <table class="pave_tot btn" border="0" cellpadding="0" cellspacing="0" align="right">
                <tr>
                    <td>
                        <INPUT id="calcul" TYPE=button VALUE="calculer" onClick="javascript:calcul_total();"></INPUT>
                    </td>

                </tr>
           
            </table>
        </td></tr>
<!-- fin pave calcul v1 -->


<!-- pave total commande -->
        <tr><td>
            <table class="pave_tot" border="0" cellpadding="0" cellspacing="0" align="right">
           
                <tr>
                    <td>
                        <table class="pave_tot_inside" border="0" cellpadding="0" cellspacing="0" align="center">
                            <tr class="ligne1">
                                <td class="lib">Total achats</td>
                              <td class="val_cde"><input  size="5" readonly="readonly" id="total_achat" value="0"/>
                              </td>
                            </tr>

                            <tr>
                                <td class="lib">Frais de transport</td>
                                <td class="val_cde"><input name="port" id="port" type="text" size="8"></td>
                            </tr>

                            <tr>
                                <td class="lib">Remise</td>
                                <td class="val_cde"><input name="tot_ttc" id="tot_ttc" type="text" size="8"></td>
                            </tr>

                            <tr class="ligne_der">
                                <td class="lib">Total &agrave; payer TTC</td>
                                <td class="val_cde"><input name="tot_ttc" id="tot_ttc" type="text" size="8"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td></tr>
<!-- fin pave total commande v1 -->


<!-- boutons Envoyer - Imprimer -->
        <tr><td>
            <table class="pave_tot btn" border="0" cellpadding="0" cellspacing="0" align="right">
                <tr>
                    <td>
                        <INPUT id="imprim" TYPE=button VALUE="" ONCLICK="window.print()"></INPUT>
                    </td>

                    <td>
                        <INPUT id="envoi" TYPE=submit VALUE=""></INPUT>
                    </td>

                </tr>
           
            </table>
        </td></tr>
<!-- FIN boutons Envoyer - Imprimer -->
       
        <tr class="interl"><td>&nbsp;</td></tr>
        <tr><td><div id="retour_espace"><a href="espace_detaillant.html">Retour &agrave; votre espace </a></div></td>
        </tr>
  </table>

</form>


</body>
</html>






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

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


div#entete {
    width: 320px;
    margin-top: 0px;
    font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.0em;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 20px;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

div#header1 {
float: right;
padding-top: 10px;
}

div#header1 a {
color: #000;
text-decoration: underline;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 1.2em;
font-weight: bold;
}

div#header2 {
float: right;
margin-right: 150px;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 1.6em;
padding-top: 10px;
}


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

margin-right: 7px;
}

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


table.pave_tot {
width: 260px;
text-align: right;
border: thin solid #e1e1e1;
margin: 10px 15px 0 0;
}

table.pave_tot_inside {
width: 240px;
margin: 5px auto;
text-align: right;
}


table.produits tr.interl {
line-height: 20px;
}

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;
}
   
tr.fond_vert {
    background-color: #cc8a57;
}



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



/* --- PAVE TOTAL COMMANDE */

table.pave_tot {
width: 260px;
text-align: right;
border: 1px solid #e1e1e1;
margin-top: 20px;
margin-right: 7px;
}

table.btn {
border: none;
}

table.identif {
width: 768px;
}


table.pave_tot_inside {
width: 240px;
margin: 5px auto;
text-align: right;
}

table.identif2 {
width: 748px;
}

table.pave_tot tr td {
font-weight: bold;
font-size: 14px;
line-height: 20px;
}

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

table.pave_tot_inside tr.ligne1 td {
border-top: none;
}

table.pave_tot_inside tr td.val_cde {
border-right: none;
width: 89px;
text-align: center;
}

table.pave_tot_inside tr td.lib {
border-left: none;
padding-right: 15px;
}

table.pave_tot_inside tr.ligne_der td {
border-bottom: none;
}



table.pave_tot_inside tr td.val_cde input {
border: none;
text-align: right;
font-weight: bold;
width: 75px;
}


/* -- boutons Envoyer - Imprimer -- */
input#imprim, input#envoi, input#calcul {
width: 88px;
height: 22px;
border: none;
}

input#imprim {
    background-image: url(../images/btn_print.jpg);
}

input#envoi {
    background-image: url(../images/btn_mail.jpg);
}

input#calcul {
    background-image: url(../images/btn_calcul.jpg);
    margin-right: 15px;
}


/* --- PAVE Identification */

table.identif {
width: 768px;
text-align: left;
border: 1px solid #e1e1e1;
margin-top: 5px;
margin-right: 7px;
}

table.identif_inside {
width: 748px;
margin: 5px auto;
text-align: left;
}

table.identif tr td {
font-weight: bold;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 20px;
}

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


table.identif_inside tr td input {
width: 100%;
font-size: 12px;
height: 13px;
font-weight: normal;

border: none;
border-bottom: 1px dotted #e1e1e1;
}

.droite {
text-align: right;
}
 
tr.fond_rose {
    background-color: #cc5457;
}

#retour_espace {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding-top: 10px;
    text-align: center;
}
#retour_espace a {
    font-size: 14px;
    font-weight: bold;
    color: #458C8F;
    text-decoration: underline;
    background-position: center;
    padding-top: 20px;
}


lundi 22 septembre 2008 à 17:22:05 | Re : Javascript : addition du contenu de 2 champs (2 chiffre à virgule)

mike1310

tu n'y arrive tout simplement pas parce que dans tes fonctions :
function calcul_prix_terroir(){
var dernierPrixterroir = 0;
}


function calcul_prix_volaille(){
var dernierPrixvolaille = 0;
}

function calcul_prix_poisson(){
var dernierPrixpoisson = 0;
}

tu mets des var dernierpoisson et autr e... tu a juste à enlever les var devant les variables ce qui donne :
function calcul_prix_terroir(){
    dernierPrixterroir = 0;
}


function calcul_prix_volaille(){
    dernierPrixvolaille = 0;
}

function calcul_prix_poisson(){
    dernierPrixpoisson = 0;
}

lundi 22 septembre 2008 à 23:54:15 | Re : Javascript : addition du contenu de 2 champs (2 chiffre à virgule)

sakura151

Membre Club
Super, ça marche !!
Par contre, on m'a dit que cela serait un peu plus intelligent de le créé en tableau pour que cela puisse être adapté plus facilement dynamiquement ?
A quoi cela correspond-il ?
La je sais que je répète les choses pour chaque famille, comment puis-je faire pour rendre ça plus dynamique ?

Merci


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


Répondre à ce message

Sujets en rapport avec ce message

Calcul total sous-total [ par 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 pr 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 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 Tableaux imbriqués [ par DAVIMIKA ] Bonjour,   <p class="MsoNormal" st 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 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


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,808 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales