IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Formulaire de calcul javascript


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Recherche d'emploi
    Inscrit en
    Janvier 2014
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Recherche d'emploi
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2014
    Messages : 34
    Par défaut Formulaire de calcul javascript
    Bonjour
    je cherche de l'aide pour faire des calculs de produits en ml et m2...
    j'ai réussi à faire le formulaire en html t'en bien que mal
    mais ont ma dit que si je veut pas que la page se recherche après le click sur le bouton qu'il faut programmer en JavaScript
    souci pour moi je suis entrain d'essayer de comprendre le JavaScript mais sa s'apprend pas en 1 jours il va être très difficile pour moi de finir ma calculette rapidement
    c'est pour cela que je vient voire si quelqu'un de gentil serait d'accord de m'aider car c'est assez complexe

    donc en gros pour explication
    j'ai plusieurs produits liquide qui doivent être doser à un certains nombre de ml chacun... mais toujours dans 1L d'eau et le mélange doit couvrir une surface de 10m2
    ( exemple: produit1 = 5ml de produit dilué dans 1L d'eau pour faire 10m2 ou encore produit2 = 25ml de produit dilué dans 1L d'eau pour couvrir 10m2 )

    *** ont ne mélange pas les produits ensemble il doivent être dilué chacun dans diffèrent récipient ***
    *** également tous les produits selon dosage sont dilué dans 1L d'eau ***
    *** et une fois le produit dilué dans 1L d'eau il servira a couvrir une surface de 10m2

    donc pour commencer
    j'ai fait une liste déroulante ou je compte mettre le nom des produits plutôt que produit1 , produit2 etc
    mais il faudrait qu'il y est une valeur car si l'utilisateur click sur produit1 il faut que l'or de l'appuie sur le bouton Valider... l'ordinateur comprenne que produit1 porte la valeur de 5ml ou si il choisi produit 2 la valeur sera 25ml

    Exemple:
    Produit1 aura la valeur de 5ml pour 1l d'eau pour 10m2
    Produit2 aura la valeur de 25ml pour 1L d'eau pour 10m2
    etc

    donc si par exemple je choisi produit1 (5ml à dilué dans 1L d'eau pour couvrir 10m2) puis j'indique que mon pulvérisateur a une contenance de 5L et que mon terrain fait 100m2
    une fois que je click sur le bouton l'ordinateur fera le calcul et donnera la réponse dans les cases en dessous

    quantité d'eau en L à mettre dans le pulvérisateur = la même quantité que le pulvérisateur peut contenir
    puis
    quantité de produit "en ml" a mettre dans le pulvérisateur = si j'indique que mon pulvérisateur fait 5L et que j'ai choisi produit1 alors faudra faire le calcul 5L d'eau multiplier par 5ml de produit sois 5x5=25
    puis
    si le pulvérisateur contient 5L d'eau ( rappel 1L d'eau = 10m2 ) alors le calculs era 5 multiplier par 10m2 = 50m2

    puis dans l'autre cadre plus bas pour calculer la surface total du terrain le calcul sera

    1L d'eau = 10m2 alors 10L d'eau = 100m2
    puis
    si 5ml de produit = 10m2 alors 50ml de produit = 100m2
    puis
    25ml de produit pour 5L d'eau = 50m2 multiplier par "2" = 100m2 alors il faudra 2 pulvérisateur

    je confirme c'est plutôt complexe mon histoire de plus je connais pas le JavaScript d'où ma demande d'aide

    Nom : calculatrices.png
Affichages : 3550
Taille : 645,3 Ko

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body background="http://bookgazon.hebergratuit.net/herbe.jpg">
    <table width="50%" border="1" align="center">
      <tr bgcolor="#CCCCCC"> 
        <td> 
          <p><b><font size="6">Calculatrice<br>
            <font size="3">pour bien calculer le dosage d'un produit<br>
            <font color="#808080">...........................................................................................................................................................................................................................................</font></font></font></b></p>
          <p><b><font color="#FF3333"><u>Informations.</u></font></b></p>
          <p><b><br>
            Produits:</b> <font color="#FF3333"><b>*</b></font><br>
            <font size="2">Veuillez choisir le produit que vous souhaitez utilisez 
            </font></p>
          <form name="form1" >
            <select name="select" size="1">
              <option>Produit 1</option>
              <option>Produit 2</option>
              <option>Produit 3</option>
              <option>Produit 4</option>
            </select>
          </form>
          <p><br>
            <b>Pulverisateur: <font color="#FF3333">*</font></b><br>
            <font size="2">Indiquez la quantité de votre pulverisateur en litre </font> 
          </p>
          <form name="form2" >
            <input type="text" name="textfield">
          </form>
          <br>
          <b>Superficie du terrain</b> <font color="#FF3333"><b>*</b></font><br>
          <font size="2">indiquer la superficie de votre terrain en m2<br>
          </font> 
          <form name="form3" >
            <input type="text" name="textfield2">
          </form>
          <br>
          <form name="form4" >
            <input type="submit" name="Submit" value="Valider">
          </form>
          <p><b><font color="#FF3333"><u> </u></font></b></p>
          <p><b><font color="#FF3333"><u>Vous devez mettre dans votre pulverisateur:</u></font></b></p>
          <b>Quantité d'eau en "L" à mettre dans votre pulverisateur:</b><br>
          <form name="form5" >
            <input type="text" name="textfield3">
          </form>
          <br>
          <b>Quantité de produit en "ml" à mettre dans le pulverisateur:</b><br>
          <form name="form5" >
            <input type="text" name="textfield4">
          </form>
          <br>
          <b>Surface à couvrir en m2... pour un pulverisateur:</b><br>
          <form name="form5" >
            <input type="text" name="textfield5">
          </form>
          <p><b><font color="#FF3333"><u><br>
            </u></font></b></p>
          <p><b><font color="#FF3333"><u>Quantité total pour faire tout votre terrain:</u></font></b><br>
          </p>
          <p> <b>Quantité d'eau</b></p>
          <form name="form5" >
            <input type="text" name="textfield3">
          </form>
          <br>
          <b>Quantité de produit</b><br>
          <form name="form5" >
            <input type="text" name="textfield4">
          </form>
          <br>
          <b>Nombre de pulverisateur</b><br>
          <form name="form5" >
            <input type="text" name="textfield5">
          </form>
          <br>
          <br>
          <b>Descriptif du produit</b><br>
          <form name="form6" >
            <input type="text" name="textfield6">
          </form>
          <br>
        </td>
      </tr>
    </table>
     
     
    </body>
    </html>

  2. #2
    Membre Expert
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : Septembre 2002
    Messages : 1 412
    Par défaut
    Intéressant ton problème. Voici mon interprétation.

    La quantite en ml vaut pour 1 L et la surface en m2 vaut aussi pour 1 L.
    Par exemple, on peut mettre 3.5 ml de briamide par litre et avec 1 litre on traite 5 m2.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    <!DOCTYPE html>
    <html>
            <head>
      <script>
       var produits = [
       {'produit':'Délectose','quantite':5,'surface':10},
       {'produit':'Briamide','quantite':3.5,'surface':5},
       {'produit':'Cortofade','quantite':4,'surface':17}
       ];
     
       var quantite = 0;
       var surface  = 0;
     
       function creeListe() {
        var html = "";
        html = option ="<option value='x'>Sélectionner un produit</option>";
        for(var i=0;i<produits.length;i++) {
         var option ="<option value='"+i+"'>"+produits[i].produit+"</option>";
         html=html+option;
        }
        document.getElementById('produit').innerHTML = html;
       }
     
       function init(value) {
           quantite = 0;
        surface  = 0; 
        var xcp = document.getElementById('cp').value; 
        var xst = document.getElementById('st').value;    
        document.getElementById('info').innerHTML = "<br/>";
        if (value!="x") {
         quantite = produits[value].quantite;
         surface  = produits[value].surface;      
         document.getElementById('info').innerHTML = "Dosage = "+quantite+" ml par litre et 1 litre pour "+surface+" m2";
        }
        document.getElementById('resultat').innerHTML = '';
        if (xcp != 0 && xst != 0) {
         calcul();
        }
       }
     
       function calcul() {
        var idProduit = document.getElementById('produit').value;
        if ( idProduit== "x" ) {
         alert("Sélectionner un produit !!!");
         return;
        }
        if (isNaN(document.getElementById('cp').value)) {
         alert("Contenance incorrecte !!!");
         return;     
        }
        if (document.getElementById('cp').value <= 0) {
         alert("Contenance incorrecte !!!");
         return;     
        } 
        if (isNaN(document.getElementById('st').value)) {
         alert("Surface terrain incorrecte !!!");
         return;     
        }    
        if (document.getElementById('st').value <= 0) {
         alert("Surface terrain incorrecte !!!");
         return;     
        } 
        var xcp = document.getElementById('cp').value; 
        var xst = document.getElementById('st').value;     
        var a         = document.getElementById('resultat');    
        a.innerHTML   = "<hr/>";
        // dosage produit pour un m2
        var dosage1M2 = quantite / surface;
     
        // dosage produit total    
        var dose      = dosage1M2 * xst;
        var x         = parseInt(dose*100)/100;
        a.innerHTML   = a.innerHTML + 'Dose totale de '+produits[idProduit].produit+" = "+x+" ml<br/>";
        // nombre de litres total
        var litres    = xst / surface;
        var y         = parseInt(litres*100)/100;
        a.innerHTML   = a.innerHTML + "Quantité totale d'eau = "+y+" L<br/>";
     
        // nombre de pulvérisateurs    
        a.innerHTML   = a.innerHTML + 'Prévoir :<br/>';
        var pulve     = y/xcp;
     
        // Nombre de pulvérisateurs complets
        var pulComp   = parseInt(pulve);
        if (pulComp != 0) {
         var z = quantite * xcp;
         libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
         a.innerHTML   = a.innerHTML + "* "+pulComp+" "+libelle+" de chacun "+xcp+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
        }
        // Pulvérisateur partiel
        var pulPart   = pulve - pulComp;
        if (pulPart != 0) {
         var w = pulPart * xcp * 100;
         w = Math.round(w,2) / 100;          
         var z = w * quantite * 100;
         z = Math.round(z,2) / 100;     
         a.innerHTML   = a.innerHTML + "* 1 pulvérisateur de "+w+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
        }
     
       }
      </script>
            </head>
     
            <body onload="creeListe()" style="font-family:verdana">
                <h3>Calcul</h3>
       <select id="produit" onchange="init(this.value)">
       </select>
       <div id="info">
        <br/>
       </div>   
       <br/><br/><br/>
       <table>
        <tr>
         <td>Contenance pulvérisateur (L)</td>
         <td>:</td>
         <td><input type="text" id="cp" value="0" /><br/></td>
        </tr>
        <tr>
         <td>Surface Terrain (m2)</td>
         <td>:</td>
         <td><input type="text" id="st" value="0" /><br/></td>
        </tr>    
       </table>
       <input type="button" value="Valider" onclick="calcul();"/>
       <div id="resultat">
     
       </div>
            </body>
    </html>
    Nom : 20170513_003.JPG
Affichages : 2965
Taille : 41,0 Ko

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


    J'ai voulu trop bien faire, je me suis fait griller !

    Mon exemple :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    !DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
      <meta name="author" content="Daniel Hagnoul">
      <title>test</title>
      <style>
        * {
          box-sizing: border-box;
        }
        
        th, td {
          padding: 0.3rem;
        }
        label {
          display: block;
        }
      </style>
      <script>
        'use strict';
        
        document.addEventListener( "DOMContentLoaded", ev => {
          
        }, false );
        
        window.addEventListener( "load", ev => {
          
          let
            produit = 0, // dosage du produit en millilitre par litre
            volume = 0, // volume du pulvérisateur en litre
            surface = 0; // surperficie du terrain en m²
            
          document.querySelector( "#btnCalcul" ).addEventListener( "click", ev => {
            produit = parseInt( document.querySelector( "#produit" ).value, 10 );
            volume = parseInt( document.querySelector( "#volume" ).value, 10 );
            surface = parseInt( document.querySelector( "#surface" ).value, 10 );
            
            document.querySelector( "#eauPulverisateur" ).value = volume;
            document.querySelector( "#produitPulverisateur" ).value = volume * produit;
            document.querySelector( "#surfacePulverisateur" ).value = 10.0 * volume;
            
            document.querySelector( "#eauTerrain" ).value = surface / 10.0;
            document.querySelector( "#produitTerrain" ).value = surface / 10.0 * produit;
            document.querySelector( "#nombreTerrain" ).value = surface / ( 10.0 * volume );
          }, false );
          
          document.querySelector( "#produit" ).addEventListener( "change", ev => {
            document.querySelector( "#btnCalcul" ).dispatchEvent( new Event( "click" ) );
          }, false );
            
        }, false );
      </script>
    </head>
    <body>
      <main>
     
        <table>
          <caption>Calcul</caption>
          <tbody>
            <tr> 
              <td>
                <label>Choisir un produit :
                  <select id="produit">
                    <option selected value="5">Produit 1</option>
                    <option value="10">Produit 2</option>
                    <option value="15">Produit 3</option>
                    <option value="20">Produit 4</option>
                  </select>
                </label>
              </td>
            </tr>
            <tr> 
              <td>
                <label>Volume du pulvérisateur en litre : <input type="text" id="volume"></label>
                <label>Surface du terrain en m² : <input type="text" id="surface"></label>
                <button id="btnCalcul">Calcul</button>
              </td>
            </tr>
            <tr> 
              <td>
                <fieldset>
                  <legend>Pulvérisateur</legend>
                  <label>Volume d'eau en litre : <output id="eauPulverisateur"></label>
                  <label>Volume du produit en millilitre : <output id="produitPulverisateur"></label>
                  <label>Surface couverte en m² : <output id="surfacePulverisateur"></label>
                </fieldset>
              </td>
            </tr>
            <tr> 
              <td>
                <fieldset>
                  <legend>Terrain</legend>
                  <label>Volume d'eau en litre : <output id="eauTerrain"></label>
                  <label>Volume du produit en millilitre : <output id="produitTerrain"></label>
                  <label>Nombre de pulvérisateur : <output id="nombreTerrain"></label>
                </fieldset>
              </td>
            </tr>
          </tbody>
        </table>
     
      </main>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,

    Ah c'est intéressant en effet... J'ai testé vos réponses :

    - http://jsbin.com/fumoyonula/edit?html,output
    - http://jsbin.com/dupulokupe/edit?html,output

  5. #5
    Membre Expert
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : Septembre 2002
    Messages : 1 412
    Par défaut
    Salut !
    Je vois qu'il y d'autres couchent tard ou lêvent tôt !

  6. #6
    Membre averti
    Homme Profil pro
    Recherche d'emploi
    Inscrit en
    Janvier 2014
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Recherche d'emploi
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2014
    Messages : 34
    Par défaut
    Re bonjour
    je tient déjà à vraiment vous remerciez pour cette rapidité exceptionnelle et se travail remarquable et franchement je suis trop content de voire qu'ont peut conpter sur des gens très pro

    Par contre je vient de testé les 2 codes donner

    danielhagnoul il y a toutes les infos mais le bouton Calcul ne fonctionne pas ( je peut pas tester... faut il que je rajoute un truc stp ?

    Badaze j'ai intégrer le code qui doit aller entre les balise <head> </head>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
        <script>
          var produits = [
            {'produit':'Délectose','quantite':5,'surface':10},
            {'produit':'Briamide','quantite':3.5,'surface':5},
            {'produit':'Cortofade','quantite':4,'surface':17}
          ];
     
          var quantite = 0;
          var surface  = 0;
     
          function creeListe() {
            var html = "";
            html = option ="<option value='x'>Sélectionner un produit</option>";
            for(var i=0;i<produits.length;i++) {
              var option ="<option value='"+i+"'>"+produits[i].produit+"</option>";
              html=html+option;
            }
            document.getElementById('produit').innerHTML = html;
          }
     
          function init(value) {
            quantite = 0;
            surface  = 0; 
            var xcp = document.getElementById('cp').value; 
            var xst = document.getElementById('st').value;    
            document.getElementById('info').innerHTML = "<br/>";
            if (value!="x") {
              quantite = produits[value].quantite;
              surface  = produits[value].surface;      
              document.getElementById('info').innerHTML = "Dosage = "+quantite+" ml par litre et 1 litre pour "+surface+" m2";
            }
            document.getElementById('resultat').innerHTML = '';
            if (xcp != 0 && xst != 0) {
              calcul();
            }
          }
     
          function calcul() {
            var idProduit = document.getElementById('produit').value;
            if ( idProduit== "x" ) {
              alert("Sélectionner un produit !!!");
              return;
            }
            if (isNaN(document.getElementById('cp').value)) {
              alert("Contenance incorrecte !!!");
              return;     
            }
            if (document.getElementById('cp').value <= 0) {
              alert("Contenance incorrecte !!!");
              return;     
            } 
            if (isNaN(document.getElementById('st').value)) {
              alert("Surface terrain incorrecte !!!");
              return;     
            }    
            if (document.getElementById('st').value <= 0) {
              alert("Surface terrain incorrecte !!!");
              return;     
            } 
            var xcp = document.getElementById('cp').value; 
            var xst = document.getElementById('st').value;     
            var a         = document.getElementById('resultat');    
            a.innerHTML   = "<hr/>";
            // dosage produit pour un m2
            var dosage1M2 = quantite / surface;
     
            // dosage produit total    
            var dose      = dosage1M2 * xst;
            var x         = parseInt(dose*100)/100;
            a.innerHTML   = a.innerHTML + 'Dose totale de '+produits[idProduit].produit+" = "+x+" ml<br/>";
            // nombre de litres total
            var litres    = xst / surface;
            var y         = parseInt(litres*100)/100;
            a.innerHTML   = a.innerHTML + "Quantité totale d'eau = "+y+" L<br/>";
     
            // nombre de pulvérisateurs    
            a.innerHTML   = a.innerHTML + 'Prévoir :<br/>';
            var pulve     = y/xcp;
     
            // Nombre de pulvérisateurs complets
            var pulComp   = parseInt(pulve);
            if (pulComp != 0) {
              var z = quantite * xcp;
              libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
              a.innerHTML   = a.innerHTML + "* "+pulComp+" "+libelle+" de chacun "+xcp+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
            }
            // Pulvérisateur partiel
            var pulPart   = pulve - pulComp;
            if (pulPart != 0) {
              var w = pulPart * xcp * 100;
              w = Math.round(w,2) / 100;          
              var z = w * quantite * 100;
              z = Math.round(z,2) / 100;     
              a.innerHTML   = a.innerHTML + "* 1 pulvérisateur de "+w+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
            }
     
          }
        </script>
    mais je comprend pas trop comment intégrer l' "id" dans les <input ............................................
    j'ai essayer de me creuser les ménages mais c'est assez complexe et je m'y perd forcement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    <html>
    <head>
    <title>Calculatrice</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script>
          var produits = [
            {'produit':'Délectose','quantite':5,'surface':10},
            {'produit':'Briamide','quantite':3.5,'surface':5},
            {'produit':'Cortofade','quantite':4,'surface':17}
          ];
     
          var quantite = 0;
          var surface  = 0;
     
          function creeListe() {
            var html = "";
            html = option ="<option value='x'>Sélectionner un produit</option>";
            for(var i=0;i<produits.length;i++) {
              var option ="<option value='"+i+"'>"+produits[i].produit+"</option>";
              html=html+option;
            }
            document.getElementById('produit').innerHTML = html;
          }
     
          function init(value) {
            quantite = 0;
            surface  = 0; 
            var xcp = document.getElementById('cp').value; 
            var xst = document.getElementById('st').value;    
            document.getElementById('info').innerHTML = "<br/>";
            if (value!="x") {
              quantite = produits[value].quantite;
              surface  = produits[value].surface;      
              document.getElementById('info').innerHTML = "Dosage = "+quantite+" ml par litre et 1 litre pour "+surface+" m2";
            }
            document.getElementById('resultat').innerHTML = '';
            if (xcp != 0 && xst != 0) {
              calcul();
            }
          }
     
          function calcul() {
            var idProduit = document.getElementById('produit').value;
            if ( idProduit== "x" ) {
              alert("Sélectionner un produit !!!");
              return;
            }
            if (isNaN(document.getElementById('cp').value)) {
              alert("Contenance incorrecte !!!");
              return;     
            }
            if (document.getElementById('cp').value <= 0) {
              alert("Contenance incorrecte !!!");
              return;     
            } 
            if (isNaN(document.getElementById('st').value)) {
              alert("Surface terrain incorrecte !!!");
              return;     
            }    
            if (document.getElementById('st').value <= 0) {
              alert("Surface terrain incorrecte !!!");
              return;     
            } 
            var xcp = document.getElementById('cp').value; 
            var xst = document.getElementById('st').value;     
            var a         = document.getElementById('resultat');    
            a.innerHTML   = "<hr/>";
            // dosage produit pour un m2
            var dosage1M2 = quantite / surface;
     
            // dosage produit total    
            var dose      = dosage1M2 * xst;
            var x         = parseInt(dose*100)/100;
            a.innerHTML   = a.innerHTML + 'Dose totale de '+produits[idProduit].produit+" = "+x+" ml<br/>";
            // nombre de litres total
            var litres    = xst / surface;
            var y         = parseInt(litres*100)/100;
            a.innerHTML   = a.innerHTML + "Quantité totale d'eau = "+y+" L<br/>";
     
            // nombre de pulvérisateurs    
            a.innerHTML   = a.innerHTML + 'Prévoir :<br/>';
            var pulve     = y/xcp;
     
            // Nombre de pulvérisateurs complets
            var pulComp   = parseInt(pulve);
            if (pulComp != 0) {
              var z = quantite * xcp;
              libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
              a.innerHTML   = a.innerHTML + "* "+pulComp+" "+libelle+" de chacun "+xcp+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
            }
            // Pulvérisateur partiel
            var pulPart   = pulve - pulComp;
            if (pulPart != 0) {
              var w = pulPart * xcp * 100;
              w = Math.round(w,2) / 100;          
              var z = w * quantite * 100;
              z = Math.round(z,2) / 100;     
              a.innerHTML   = a.innerHTML + "* 1 pulvérisateur de "+w+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
            }
     
          }
        </script>
    </head>
    <body background="http://bookgazon.hebergratuit.net/herbe.jpg">
    <table width="50%" border="1" align="center">
      <tr bgcolor="#CCCCCC"> 
        <td> 
          <p><b><font size="6">Calculatrice<br>
            <font size="3">pour bien calculer le dosage d'un produit<br>
            <font color="#808080">...........................................................................................................................................................................................................................................</font></font></font></b></p>
          <p><b><font color="#FF3333"><u>Informations.</u></font></b></p>
          <p><b><br>
            Produits:</b> <font color="#FF3333"><b>*</b></font><br>
            <font size="2">Veuillez choisir le produit que vous souhaitez utilisez 
            </font></p>
          <form name="form1" >
            <select name="select" size="1">
              <option>Produit 1</option>
              <option>Produit 2</option>
              <option>Produit 3</option>
              <option>Produit 4</option>
            </select>
          </form>
          <p><br>
            <b>Pulverisateur: <font color="#FF3333">*</font></b><br>
            <font size="2">Indiquez la quantité de votre pulverisateur en litre </font> 
          </p>
          <form name="form2" >
            <input type="text" name="textfield">
          </form>
          <br>
          <b>Superficie du terrain</b> <font color="#FF3333"><b>*</b></font><br>
          <font size="2">indiquer la superficie de votre terrain en m2<br>
          </font> 
          <form name="form3" >
            <input type="text" name="textfield2">
          </form>
          <br>
          <form name="form4" >
            <input type="submit" name="Submit" value="Valider">
          </form>
          <p><b><font color="#FF3333"><u> </u></font></b></p>
          <p><b><font color="#FF3333"><u>Vous devez mettre dans votre pulverisateur:</u></font></b></p>
          <b>Quantité d'eau en "L" à mettre dans votre pulverisateur:</b><br>
          <form name="form5" >
            <input type="text" name="textfield3">
          </form>
          <br>
          <b>Quantité de produit en "ml" à mettre dans le pulverisateur:</b><br>
          <form name="form5" >
            <input type="text" name="textfield4">
          </form>
          <br>
          <b>Surface à couvrir en m2... pour un pulverisateur:</b><br>
          <form name="form5" >
            <input type="text" name="textfield5">
          </form>
          <p><b><font color="#FF3333"><u><br>
            </u></font></b></p>
          <p><b><font color="#FF3333"><u>Quantité total pour faire tout votre terrain:</u></font></b><br>
          </p>
          <p> <b>Quantité d'eau</b></p>
          <form name="form5" >
            <input type="text" name="textfield3">
          </form>
          <br>
          <b>Quantité de produit</b><br>
          <form name="form5" >
            <input type="text" name="textfield4">
          </form>
          <br>
          <b>Nombre de pulverisateur</b><br>
          <form name="form5" >
            <input type="text" name="textfield5">
          </form>
          <br>
          <br>
          <b>Descriptif du produit</b><br>
          <form name="form6" >
            <input type="text" name="textfield6">
          </form>
          <br>
        </td>
      </tr>
    </table>
     
     
    </body>
    </html>
    il manque aussi le code pour ses 4 champs
    Nom : calcul01.jpg
Affichages : 3128
Taille : 179,6 Ko

  7. #7
    Membre Expert
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : Septembre 2002
    Messages : 1 412
    Par défaut
    Attention. Tu n'as pas forcément un nombre entier de pulvérisateurs.

    • Pour bien calculer le dosage d'un produit
    • Veuillez choisir le produit que vous voulez utiliser
    • Indiquez la superficie de votre terrain en m2
    • (Litres)
    • (Millilitres)
    • Surface à couvrir indiquée en m2
    • Quantité indiquée


    Pour ta question, je n'ai pas le temps en ce moment. Peut être ce soir.

  8. #8
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    B]danielhagnoul[/B] il y a toutes les infos mais le bouton Calcul ne fonctionne pas ( je peut pas tester... faut il que je rajoute un truc stp ?
    Le code de votre fichier jsbin n'est pas à jour (voir mon message : "Amélioration de la présentation des résultats de calcul"), mais il fonctionne, je viens de le tester.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Amélioration de la présentation des résultats de calcul :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
          let
            produit = 0, // dosage du produit en millilitre par litre
            volume = 0, // volume du pulvérisateur en litre
            surface = 0; // surperficie du terrain en m²
     
          document.querySelector( "#btnCalcul" ).addEventListener( "click", ev => {
            produit = parseInt( document.querySelector( "#produit" ).value, 10 );
            volume = parseInt( document.querySelector( "#volume" ).value, 10 );
            surface = parseInt( document.querySelector( "#surface" ).value, 10 );
     
            if ( produit > 0 && volume > 0 && surface > 0 ){
              document.querySelector( "#eauPulverisateur" ).value = volume.toFixed(2);
              document.querySelector( "#produitPulverisateur" ).value = ( volume * produit ).toFixed(2);
              document.querySelector( "#surfacePulverisateur" ).value = ( 10.0 * volume ).toFixed(2);
     
              document.querySelector( "#eauTerrain" ).value = ( surface / 10.0 ).toFixed(2);
              document.querySelector( "#produitTerrain" ).value = ( surface / 10.0 * produit ).toFixed(2);
              document.querySelector( "#nombreTerrain" ).value = ( surface / ( 10.0 * volume ) ).toFixed(2);
            }
          }, false );
     
          document.querySelector( "#produit" ).addEventListener( "change", ev => {
            document.querySelector( "#btnCalcul" ).dispatchEvent( new Event( "click" ) );
          }, false );

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. formulaire qui calcule ????????
    Par yoan_111 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 18/03/2006, 13h07
  2. formulaire + Calendrier en javascript?
    Par nikalkal dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 26/02/2006, 21h32
  3. Réponses: 3
    Dernier message: 23/01/2006, 10h10
  4. Pb de formulaire Post avec javascript
    Par critok dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 28/09/2005, 15h31
  5. [jsp]controles des formulaires servlet ou javascript ?
    Par alexandra_ape dans le forum Servlets/JSP
    Réponses: 7
    Dernier message: 05/07/2004, 14h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo