Forumlaire de calcul javascript (engrais / eau / surface)

Messages postés
88
Date d'inscription
jeudi 29 avril 2004
Dernière intervention
1 décembre 2018
- - Dernière réponse : cs_stay
Messages postés
496
Date d'inscription
jeudi 7 juillet 2005
Dernière intervention
24 mai 2017
- 20 mai 2017 à 19: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
Afficher la suite 

Votre réponse

4 réponses

Messages postés
23539
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
0
Merci
Bonjour,

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

asp2p
Messages postés
88
Date d'inscription
jeudi 29 avril 2004
Dernière intervention
1 décembre 2018
-
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
23539
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
> asp2p
Messages postés
88
Date d'inscription
jeudi 29 avril 2004
Dernière intervention
1 décembre 2018
-
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 )
Commenter la réponse de jordane45
Messages postés
88
Date d'inscription
jeudi 29 avril 2004
Dernière intervention
1 décembre 2018
0
Merci
<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>
Commenter la réponse de asp2p
Messages postés
88
Date d'inscription
jeudi 29 avril 2004
Dernière intervention
1 décembre 2018
0
Merci
plus de nouvelle ?
jordane45
Messages postés
23539
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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.
Commenter la réponse de asp2p
Messages postés
88
Date d'inscription
jeudi 29 avril 2004
Dernière intervention
1 décembre 2018
0
Merci
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
496
Date d'inscription
jeudi 7 juillet 2005
Dernière intervention
24 mai 2017
-
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
23539
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
> cs_stay
Messages postés
496
Date d'inscription
jeudi 7 juillet 2005
Dernière intervention
24 mai 2017
-
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
496
Date d'inscription
jeudi 7 juillet 2005
Dernière intervention
24 mai 2017
-
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.
jordane45
Messages postés
23539
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
> cs_stay
Messages postés
496
Date d'inscription
jeudi 7 juillet 2005
Dernière intervention
24 mai 2017
-
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
496
Date d'inscription
jeudi 7 juillet 2005
Dernière intervention
24 mai 2017
-
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. :)
Commenter la réponse de asp2p

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.