Sujet Précédent Sujet Suivant

Forumlaire de calcul javascript (engrais / eau / surface)

asp2p Messages postés 91 Date d'inscription jeudi 29 avril 2004 Statut Membre Dernière intervention 29 août 2023 - 6 mai 2017 à 16:14
kadidj11 Messages postés 1 Date d'inscription jeudi 9 avril 2020 Statut Membre Dernière intervention 9 avril 2020 - 9 avril 2020 à 09:03

Bonjour
je cherche à faire un formulaire qui permet de calculer des dosages (Engrais Liquid) + (eau) + (surface) + (nombre de pulverisateur)

au début j'avais demander dans la section forum PHP mais en cherchant je me suis aperçu qu'en PHP une fois avoir cliquer sur le bouton valider la page s'actualise et dont il faut utiliser le javascript pour que quand ont clique sur le bouton valider sa affiche le résultat

le souci c'est que je n'y connais rien en programmation et que apprendre javascript va me prendre au moins 1ans et pour être franc je n'est pas trop se temps

j'utilise pour le moment Dreamweaver 3 mais le langage html n'est plus d'actu je crois que maintenant c'est le dhtml qui est passer ou un truc comme ça

si quelqu'un peut m'aider se serait vraiment gentil car je galère pour la parti calcul car pour la parti formulaire je pense pouvoir y arriver mais le plus gros problème est la suite pour faire le calcul en javascript

c'est pas évident tout ça
ps: j'ai vu qu'il y a des logiciels qui aide mais le probleme c'est que c'est bourrée de pub

A voir également:

Afficher résultat calcul javascript
Récupérer données json (javascript) - Conseils pratiques -Javascript
Afficher un tableau php en html - Conseils pratiques -PHP
Javascript poo - Conseils pratiques -Javascript
Flash resultat ✓ - Forum Flash
Calcul vitesse course a pied - Forum Visual Basic 6

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
6 mai 2017 à 17:27

Bonjour,

Pour commencer ..; il nous faudrait le code html de ton formulaire.

asp2p Messages postés 91 Date d'inscription jeudi 29 avril 2004 Statut Membre Dernière intervention 29 août 2023
Modifié le 6 mai 2017 à 21:09

voici ( sa doit pas etre très propre c'est fait avec Dreamweaver 3.0 désolé )

https://code.empreintesduweb.com/11622.html

merci de prendre un peut de temps pour m'aider c'est vraiment gentil

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344 > asp2p Messages postés 91 Date d'inscription jeudi 29 avril 2004 Statut Membre Dernière intervention 29 août 2023
7 mai 2017 à 03:50

Merci de poster ton code directement ici (en prenant soit d'utiliser les balises de code http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code )

Réponse 2 / 5

asp2p Messages postés 91 Date d'inscription jeudi 29 avril 2004 Statut Membre Dernière intervention 29 août 2023
7 mai 2017 à 10:02

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

Réponse 3 / 5

asp2p Messages postés 91 Date d'inscription jeudi 29 avril 2004 Statut Membre Dernière intervention 29 août 2023
9 mai 2017 à 22:20

plus de nouvelle ?

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
10 mai 2017 à 01:55

désolé.
Je n'ai pas eu le temps.

Donc déjà ... pour pouvoir correctement faire du javascript il faudrait déjà que tu ajoutes des ID à tes éléments html.
par exemple

<input type="text" name="textfield" id="qte_pulvrerisateur">

Ensuite, faudra, en dessous de ton html, avant </body> .. mettre les balises de script

<script type="text/javascript">
 //ici tu mettras le code de ton calcul..
</script>

En JS, pour récupérer la valeur d'un input il suffit de faire:

 var quantite_pulverisateur = document.getElementById('qte_pulvrerisateur').value;

Si ce sont des chiffres .. tu peux ajouter devant : parseFloat si nombre à virgule ou parseInt si ce sont des entiers.

Réponse 4 / 5

asp2p Messages postés 91 Date d'inscription jeudi 29 avril 2004 Statut Membre Dernière intervention 29 août 2023
15 mai 2017 à 18:57

bon
j'ai réussi a voire avec une personne très sympa qui ma proposer de me donner un coup de main
sauf que je n'est pas trop envie de l'embêter avec mes demandes et je voudrais savoir si quelqu'un peut nous aidez à avancer svp

1/ quand ont arrive sur la page, la liste des produits est vide puis se charge et s'affiche...
( je voulais savoir si ont pourrais pas enlever le chargement afin que la liste déroulante s'affiche directement )

2/ pour les résultats,
il faut entrer les infos et cliquer sur le bouton "valider" pour que le résultat s'affiche...
( serait il possible que pratiquement tous les champs de formulaire sois visible directement sans cliquer sur "Valider" pour les affichés )

3/ voire images et code pour plus de compréhension car c'est pas vraiment facile a expliquer par ecrit

<!DOCTYPE html>
<html>
        <head>
  <style type="text/css">
  h3 {color:red}
  h4 {color:blue}
  </style>
  <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 zC = quantite * xcp;
     libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
     //a.innerHTML   = a.innerHTML + "* "+pulComp+" "+libelle+" de chacun "+xcp+" L et "+zC+" 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/>";
    }
    //------- Mélange à faire comme ceci
    a.innerHTML   = a.innerHTML + "<hr/>";
    a.innerHTML   = a.innerHTML + "<h3 color='red'>Mélange à faire comme ceci :</h3>";  
    
    if (pulComp != 0) {
     libelle       = pulComp == 1 ? "Dans le pulvérisateur rempli complètement/" : "Dans chacun des "+pulComp+" pulvérisateurs remplis complètement:";
     a.innerHTML   = a.innerHTML + "<h4>"+libelle+"</h4>";     
     a.innerHTML   = a.innerHTML + "Litre(s) d'eau à mettre :<br/>";
     a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+xcp+" L'/><br/>";
     a.innerHTML   = a.innerHTML + "Millilitre(s) de "+produits[idProduit].produit+" à mettre :<br/>";
     a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+zC+" ml'/><br/>";    
     a.innerHTML   = a.innerHTML + "Surface couverte en m2 :<br/>";
     xSurface      = surface * xcp;
     a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+xSurface+" m2'/><br/>";    
    }
    if (pulPart != 0) {
     a.innerHTML   = a.innerHTML + "<h4>Dans le pulvérisateur rempli partiellement:</h4>";     
     a.innerHTML   = a.innerHTML + "Litre(s) d'eau à mettre :<br/>";
     a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+w+" L'/><br/>";
     a.innerHTML   = a.innerHTML + "Millilitre(s) de "+produits[idProduit].produit+" à mettre :<br/>";
     a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+z+" ml'/><br/>";    
     a.innerHTML   = a.innerHTML + "Surface couverte en m2 :<br/>";
     xSurface      = surface * w;
     a.innerHTML   = a.innerHTML + "<input type='text' disabled  value='"+xSurface+" m2'/><br/>";
    }
    
    //------- Quantité pour couvrir le terrain
    a.innerHTML   = a.innerHTML + "<hr/>";
    a.innerHTML   = a.innerHTML + "<h3 color='red'>Quantité pour couvrir votre terrain :</h3>";
    // Eau
    a.innerHTML   = a.innerHTML + "Quantité d'eau en litres :<br/>";
    a.innerHTML   = a.innerHTML + "<input type='text' disabled value='"+y+" L'/><br/>";
    // Produit
    a.innerHTML   = a.innerHTML + "Quantité de produit en millilitres :<br/>";
    a.innerHTML   = a.innerHTML + "<input type='text' disabled value='"+x+" ml'/><br/>";  
    // Nombre de pulvérisateurs
    a.innerHTML   = a.innerHTML + "Nombre de pulvérisateurs :<br/>";    
    if (pulComp != 0) {
     libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
     a.innerHTML   = a.innerHTML + "- "+pulComp+" "+libelle+" de "+xcp+" L<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 <br/>";
    }    
   }
  </script>
        </head>
 
        <body onload="creeListe()" style="font-family:verdana">
            <h2>Calcul</h2>
   <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>

cs_stay Messages postés 493 Date d'inscription jeudi 7 juillet 2005 Statut Membre Dernière intervention 24 mai 2017 4
Modifié le 20 mai 2017 à 13:12

Bonjour asp2p,

J'ai pas essayé ton code et je ne vais pas vérifier si on peut l'optimiser.
Par contre, je vais te données de bon conseils très précieux qui serviront à tout le monde.

Il faut toujours se méfier du JavaScript. C'est un language procedural qui a plusieurs défaut. Il a besoin de temps pour exécuter chaque ligne de la procédure. Dans certain cas, on peut même le voir en temps réel.

Cela peut également générer des bugs. Par ex. (pas dans ton code), à la ligne 16, l'object client doit être initialisé. La ligne 17 veut récupérer l'id du client, l'object client.id n’existe pas car la ligne 16 à pris trop de temps pour initialiser l'object.

De plus pour la maintenance de ton application, ta façon de faire est mauvaise. Imaginons que le propriétaire du site à qui tu peux offrir ce code veuille un site multilingue.

Et pour des raisons de gestion quotidienne du code source. C'est pas bon non plus. J'ai vu que tout est inséré dans ta page HTML. Tu dois bien séparer les codes de chaque language dans des fichiers différents.

Même tes fonctions JavaScript doivent être rangés dans des fichiers.
Tu peux utiliser des classes POO.

Voici un exemple de classe en JQuery :

/** 
 * @package  test
 * @subpackage js
 */
(function($) {
 $.calcule = {
  tva: 1.21,  // float
  escompte = 0, // int
  escompteAutorise = false, // boolean
  result: 0,  // int
  params: {}, // object
  
  // initalise les données
  init: function() { // constructor
   $.calcule.params.prix_htva = 0;
  },
  
  // lance le processus
  run: function() {
   $.calcule.addTva();
   // Vérifie l'on peut faire un escompte
   if ($.calcule.escompteAutorise == true)
    $.calcule.soustraitEscompte(); // 
  },
  
  // le produit
  addTva: function() {
   $.calcule.result = $.calcule.params.prix_htva*$.calcule.tva;
  },
  
  // soustrait l'escompte
  soustraitEscompte: function() {
   $.calcule.result = $.calcule.result-$.calcule.escompte;
  }
 }
})(jQuery);

Dans la partie HTML

<span id="resultat"><!-- Affiche le résultat --></span>

<script type="text/javascript">
    //<![CDATA[
    $(function() {
  $.calcule.init(); // initalise les données
  $.calcule.params.prix_htva = 110; // initalise la valeur du produit htva
  $.calcule.escompte = 15; // 15 € 
  $.calcule.escompteAutorise = true; // autorise l'escompte
  $.calcule.run(); ; // lance le processus
  
  $('#resultat').text($.calcule.result); // affiche le résultat dans l'HTML
    });
    //]]>
</script>

J'espère que cela va servir. Car j'ai pas fait ca en 5 min. :)

Avec cela, tu peux également traiter tes données coté serveur en asynchrone et insérer des résultats de données d'un coup dans l'HTML.
C'est plus rapide et sans bug en cas de grosse procedure.

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344 > cs_stay Messages postés 493 Date d'inscription jeudi 7 juillet 2005 Statut Membre Dernière intervention 24 mai 2017
20 mai 2017 à 13:53

Bonjour cs_stay,

petite remarque concernant l'utilisation des class en javascript...
Il me semble (sauf si changement récent à ce sujet mais j'en doute....) que les "class" en javascript ne sont pas supportées par tous les navigateurs.... et je crois qu'il est préférable d'utiliser seulement les prototypes ....
Mais pour un code aussi "simple" que celui demandé .. je doute que ça soit nécessaire ....

et

Il faut toujours se méfier du JavaScript. C'est un language procedural qui a plusieurs défaut. Il a besoin de temps pour exécuter chaque ligne de la procédure. Dans certain cas, on peut même le voir en temps réel.

Quel langage n'a pas de défaut ?
Procédural..oui ... et orienté objet.

concernant ta remarque sur la "lenteur" du JS .. et bien... disons que cela dépend uniquement du PC de l'utilisateur...et de l'optimisation du code....

cs_stay Messages postés 493 Date d'inscription jeudi 7 juillet 2005 Statut Membre Dernière intervention 24 mai 2017 4
Modifié le 20 mai 2017 à 15:08

Bonjour,

Pour moi, les traitement de données devrait être fait coté serveur pour la sécurité et l'optimisation du code.

Pour l’orienté object, mon exemple fonctionne avec la librairie JQuery qui elle est compatible sur la majorité des browsers. C'est pour cela qu'il a été créer. Il gère toute ces différences.

Et comme tu dis : cela dépend uniquement du PC de l'utilisateur...et de l'optimisation du code.... ; Il faut prendre mon conseil au sérieux ;)

Et je t'avoue que le code présenté utilise une façon de faire des années avant 2005. Il y a des moteurs de template également en JavaScript comme MustacheJS http://blogs.infinitesquare.com/posts/web/un-moteur-de-template-simple-mustachejs qui gère les données HTML sans les mélanger au code JS.

Mais dans mon cas, je préfère gérer cela coté serveur. Des switch d'input ou validation par rapport à une valeur.

Pour l’orienté object, mon exemple fonctionne avec la librairie JQuery qui elle est compatible sur la majorité des browsers. C'est pour cela qu'il a été créer. Il gère toute ces différences.

Ne confond pas les librairies comme Jquery (qui n'est qu'un complément au langage javascript ... ça reste du javascript..... ) et les NOTIONS comme les CLASS qui, peut importe que ce soit en jquery ou en pure js .. fonctionnent toujours de la même façon.

Ton code..oui fonctionnera partout ... car ce n'est pas vraiment un class (au sens strict du terme) ... mais l'utilisation desPROTOTYPES

cs_stay Messages postés 493 Date d'inscription jeudi 7 juillet 2005 Statut Membre Dernière intervention 24 mai 2017 4
20 mai 2017 à 19:03

Même si tu n'as pas parlé de directement de JQuery, tu as eu tort de dire quelle n'était pas compatible sur la plupart des navigateurs dans ton post précédent. Car j'ai parlé de rien d'autre. Et je préfère gérer mes variables et fonctions avec cette méthode ;) Pour la nomenclature réel class ou pas class. Je ne suis qu'un autodidact. Je te fais confiance :) Mais cela fonctionne pareil et c'est bien plus propre et facile à gérer pour tout type d'application. Petite ou grande. :)

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

Posez votre question

Réponse 5 / 5

kadidj11 Messages postés 1 Date d'inscription jeudi 9 avril 2020 Statut Membre Dernière intervention 9 avril 2020
9 avril 2020 à 09:03

Bonjour a tous,
je viens de lire les conseils sur votre forum. Très intéressant...
Etant un véritable novice en programmation, j'aurai bien aimer avoir un code source complet de calcul intégrant le jquery et le html
Merci d'avance

Discussions similaires

Calcul de somme dans un formulaire

COMMENT CALCULER LE VOLUME DE MORTIER POUR MONTER UN MUR EN PARPAINGS

afficher un tableau en php

Scores foot direct

Partie entiére d'un nombre

Votre réponse

Discussions similaires