Formulaire de calcul en HTML/JavaScript

Formulaire de calcul en HTML/JavaScript - Javascript/Node.js - Programmation

Marsh Posté le 19-05-2017 à 21:26:51    

Bonjour,  
le projet était de faire un formulaire de calcul en HTML/JavaScript
se formulaire sert à calculer des quantités d'engrais liquide, mélanger avec une certaine quantité d'eau et à pulvériser sur une certaine surface.
 
Voici mon formulaire de calcul
http://bookgazon.hebergratuit.net/new2.php
http://zupimages.net/up/17/20/2y0e.jpg
 
après avoir parcouru et poser la question sur une dizaine de forum... seul une personne m'a fait se code
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.   <style type="text/css">
  5.   h3 {color:red}
  6.   h4 {color:blue}
  7.   body {background-image:url('herbe.jpg');}
  8.   </style>
  9.   <script>
  10.    var produits = [
  11.    {'produit':'Délectose','quantite':5,'surface':10},
  12.    {'produit':'Briamide','quantite':3.5,'surface':5},
  13.    {'produit':'Cortofade','quantite':4,'surface':17}
  14.    ];
  16.    var quantite = 0;
  17.    var surface  = 0;
  19.    function creeListe() {
  20.     var html = "";
  21.     html = option ="<option value='x'>Sélectionner un produit</option>";
  22.     for(var i=0;i<produits.length;i++) {
  23.      var option ="<option value='"+i+"'>"+produits[i].produit+"</option>";
  24.      html=html+option;
  25.     }
  26.     document.getElementById('produit').innerHTML = html;
  27.    }
  29.    function init(value) {
  30.        quantite = 0;
  31.     surface  = 0;
  32.     var xcp = document.getElementById('cp').value;
  33.     var xst = document.getElementById('st').value;   
  34.     document.getElementById('info').innerHTML = "<br/>";
  35.     if (value!="x" ) {
  36.      quantite = produits[value].quantite;
  37.      surface  = produits[value].surface;     
  38.      document.getElementById('info').innerHTML = "Dosage = "+quantite+" ml par litre et 1 litre pour "+surface+" m2";
  39.     }
  40.     document.getElementById('resultat').innerHTML = '';
  41.     if (xcp != 0 && xst != 0) {
  42.      calcul();
  43.     }
  44.    }
  46.    function calcul() {
  47.     var idProduit = document.getElementById('produit').value;
  48.     if ( idProduit== "x" ) {
  49.      alert("Sélectionner un produit !!!" );
  50.      return;
  51.     }
  52.     if (isNaN(document.getElementById('cp').value)) {
  53.      alert("Contenance incorrecte !!!" );
  54.      return;   
  55.     }
  56.     if (document.getElementById('cp').value <= 0) {
  57.      alert("Contenance incorrecte !!!" );
  58.      return;   
  59.     }
  60.     if (isNaN(document.getElementById('st').value)) {
  61.      alert("Surface terrain incorrecte !!!" );
  62.      return;   
  63.     }   
  64.     if (document.getElementById('st').value <= 0) {
  65.      alert("Surface terrain incorrecte !!!" );
  66.      return;   
  67.     }
  68.     var xcp = document.getElementById('cp').value;
  69.     var xst = document.getElementById('st').value;   
  70.     var a         = document.getElementById('resultat');   
  71.     a.innerHTML   = "<hr/>";
  72.     // dosage produit pour un m2
  73.     var dosage1M2 = quantite / surface;
  75.     // dosage produit total     
  76.     var dose      = dosage1M2 * xst;
  77.     var x         = parseInt(dose*100)/100;
  78.     //a.innerHTML   = a.innerHTML + 'Dose totale de '+produits[idProduit].produit+" = "+x+" ml<br/>";
  79.     // nombre de litres total
  80.     var litres    = xst / surface;
  81.     var y         = parseInt(litres*100)/100;
  82.     //a.innerHTML   = a.innerHTML + "Quantité totale d'eau = "+y+" L<br/>";
  84.     // nombre de pulvérisateurs     
  85.     //a.innerHTML   = a.innerHTML + 'Prévoir :<br/>';
  86.     var pulve     = y/xcp;
  88.     // Nombre de pulvérisateurs complets
  89.     var pulComp   = parseInt(pulve);
  90.     if (pulComp != 0) {
  91.      var zC = quantite * xcp;
  92.      libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
  93.      //a.innerHTML   = a.innerHTML + "* "+pulComp+" "+libelle+" de chacun "+xcp+" L et "+zC+" ml de "+produits[idProduit].produit+"<br/>";
  94.     }
  95.     // Pulvérisateur partiel
  96.     var pulPart   = pulve - pulComp;
  97.     if (pulPart != 0) {
  98.      var w = pulPart * xcp * 100;
  99.      w = Math.round(w,2) / 100;         
  100.      var z = w * quantite * 100;
  101.      z = Math.round(z,2) / 100;   
  102.      //a.innerHTML   = a.innerHTML + "* 1 pulvérisateur de "+w+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
  103.     }
  104.     //------- Mélange à faire comme ceci
  105.     a.innerHTML   = a.innerHTML + "<hr/>";
  106.     a.innerHTML   = a.innerHTML + "<h3 color='red'>Mélange à faire comme ceci :</h3>"; 
  108.     if (pulComp != 0) {
  109.      libelle       = pulComp == 1 ? "Dans le pulvérisateur rempli complètement/" : "Dans chacun des "+pulComp+" pulvérisateurs remplis complètement:";
  110.      a.innerHTML   = a.innerHTML + "<h4>"+libelle+"</h4>";   
  111.      a.innerHTML   = a.innerHTML + "Litre(s) d'eau à mettre :<br/>";
  112.      a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+xcp+" L'/><br/>";
  113.      a.innerHTML   = a.innerHTML + "Millilitre(s) de "+produits[idProduit].produit+" à mettre :<br/>";
  114.      a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+zC+" ml'/><br/>";   
  115.      a.innerHTML   = a.innerHTML + "Surface couverte en m2 :<br/>";
  116.      xSurface      = surface * xcp;
  117.      a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+xSurface+" m2'/><br/>";   
  118.     }
  119.     if (pulPart != 0) {
  120.      a.innerHTML   = a.innerHTML + "<h4>Dans le pulvérisateur rempli partiellement:</h4>";   
  121.      a.innerHTML   = a.innerHTML + "Litre(s) d'eau à mettre :<br/>";
  122.      a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+w+" L'/><br/>";
  123.      a.innerHTML   = a.innerHTML + "Millilitre(s) de "+produits[idProduit].produit+" à mettre :<br/>";
  124.      a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+z+" ml'/><br/>";   
  125.      a.innerHTML   = a.innerHTML + "Surface couverte en m2 :<br/>";
  126.      xSurface      = surface * w;
  127.      a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+xSurface+" m2'/><br/>";
  128.     }
  130.     //------- Quantité pour couvrir le terrain
  131.     a.innerHTML   = a.innerHTML + "<hr/>";
  132.     a.innerHTML   = a.innerHTML + "<h3 color='red'>Quantité pour couvrir votre terrain :</h3>";
  133.     // Eau
  134.     a.innerHTML   = a.innerHTML + "Quantité d'eau en litres :<br/>";
  135.     a.innerHTML   = a.innerHTML + "<input type='text' disabled value='"+y+" L'/><br/>";
  136.     // Produit
  137.     a.innerHTML   = a.innerHTML + "Quantité de produit en millilitres :<br/>";
  138.     a.innerHTML   = a.innerHTML + "<input type='text' disabled value='"+x+" ml'/><br/>"; 
  139.     // Nombre de pulvérisateurs
  140.     a.innerHTML   = a.innerHTML + "Nombre de pulvérisateurs :<br/>";   
  141.     if (pulComp != 0) {
  142.      libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
  143.      a.innerHTML   = a.innerHTML + "- "+pulComp+" "+libelle+" de "+xcp+" L<br/>";
  144.     }
  145.     // Pulvérisateur partiel
  146.     var pulPart   = pulve - pulComp;
  147.     if (pulPart != 0) {
  148.      var w = pulPart * xcp * 100;
  149.      w = Math.round(w,2) / 100;         
  150.      var z = w * quantite * 100;
  151.      z = Math.round(z,2) / 100;   
  152.      a.innerHTML   = a.innerHTML + "- 1 pulvérisateur de "+w+" L <br/>";
  153.     }   
  154.    }
  155.   </script>
  156.         </head>
  158.         <body onload="creeListe()" style="font-family:verdana">
  159.    <table align="center" width="60%" bgcolor="lightgray" height="1300">
  160.    <tr><td valign="top">
  161.             <h2>Calcul</h2>
  162.    <select id="produit" onchange="init(this.value)">
  163.    </select>
  164.    <div id="info">
  165.     <br/>
  166.    </div> 
  167.    <br/><br/><br/>
  168.    <table>
  169.     <tr>
  170.      <td>Contenance pulvérisateur (L)</td>
  171.      <td>:</td>
  172.      <td><input type="text" id="cp" value="0" /><br/></td>
  173.     </tr>
  174.     <tr>
  175.      <td>Surface Terrain (m2)</td>
  176.      <td>:</td>
  177.      <td><input type="text" id="st" value="0" /><br/></td>
  178.     </tr>   
  179.    </table>
  180.    <input type="button" value="Valider" onclick="calcul();"/>
  181.    <div id="resultat">
  183.    </div>
  184.    </td></tr>
  185.    </table>
  186.         </body>
  187. </html>

sauf que cette personne a fait le code à ça façon et ne la pas intégrer aux miens  
donc je me retrouve avec un style de page qui ne ressemble pas trop au miens
http://bookgazon.hebergratuit.net/new1.php
 
Voici le style de la page avec sont code
http://zupimages.net/up/17/20/zpv6.jpg
 
c'est sympa de sa part j'en suis conscient surtout que sont code évite les erreurs de calcul de se style la
 
http://zupimages.net/up/17/20/ococ.jpg  
 
mais visuellement c'était pas se que j'attendais  
je lui est demander si il serait possible d'intégrer sont code dans le mien histoire d'avoir ses fonctions de calcul mais avec la présentation de mon formulaire
mais il m'a répondu que je chercher trop dans le détail et que sont code été très bien ( sympa !  :( )  
 
de plus avec sont code.. quand ont arrive sur la page il s'affiche seulement cette parti
 
http://zupimages.net/up/17/20/ktzw.jpg
 
puis une fois avoir choisi le produit dans la liste puis avoir rempli les champs... ont clique sur Valider...
et c'est seulement quand ont a cliquer sur Valider que les champs résultats s'affiche
http://bookgazon.hebergratuit.net/new1.php
 
hors moi dans mon formulaire  
http://bookgazon.hebergratuit.net/new2.php
les cases s'affiche vide mais ont les vois quand même
 
je comprend pas pourquoi il a voulu caché les champs de résultat ( image ci-dessous ) et affichés les champs seulement qu'après avoir cliquer sur valider
 
http://zupimages.net/up/17/20/qqbp.jpg
 
franchement au début j'était content et j'essayer de comprendre sont code
mais au bout de 2 semaines à entendre des critiques et à me creuser le crane jusqu'à la migraine avec les yeux en feu je commence a perdre espoirs
 
je m'en remet à vous cher programmeurs si vous pouvez m'aider se serait vraiment géant car pour le moment le morale n'y est pas

Message cité 1 fois
Message édité par asp2p le 19-05-2017 à 21:34:55
Reply

Marsh Posté le 19-05-2017 à 21:26:51   

Reply

Marsh Posté le 19-05-2017 à 22:36:16    

asp2p a écrit :

le projet était de faire un formulaire de calcul en HTML/JavaScript
[...]
après avoir parcouru et poser la question sur une dizaine de forum... seul une personne m'a fait se code

Et ton rôle là dedans c'était quoi à part empocher des sous ou une bonne note?
 
règlement 0C et 0D
 
Aussi personnellement ton premier lien (j'ai pas regardé le reste) ne m'inspire pas confiance et je n'activerai pas JS là dessus. Un cookie jusqu'en 2037 soit, mais avec un truc (dé)crypté en AES... :??:
 
EDIT: Franchement c'est gros quand même!

Citation :

mais visuellement c'était pas se que j'attendais

Tu veux dire que ça ne correspond pas au cahier des charges du boulot que toi tu était censé faire?

Citation :

je lui est demander si il serait possible d'intégrer sont code dans le mien histoire d'avoir ses fonctions de calcul mais avec la présentation de mon formulaire
mais il m'a répondu que je chercher trop dans le détail et que sont code été très bien ( sympa !  :( )  

Tu fais chier sur une dizaine (!!!) de forums, finalement tu trouves un con qui te fait ton boulot et après tu te plains en plus? Et ben...


Message édité par rat de combat le 19-05-2017 à 22:40:33
Reply

Marsh Posté le 19-05-2017 à 23:27:20    

Post a cloturé j'irait voire ailleurs
bonne continuation

Reply

Marsh Posté le 20-05-2017 à 00:22:17    

Désolé on mange bio ici. [:julm3]


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed