Formulaire de calcul javascript

**badaze** · 19/05/2017, 12h49

Tu veux un affichage avec des valeurs par défaut ?

**asp2p** · 19/05/2017, 14h35

non je veut juste avoir mon style de page...

exemple:
ma page: http://bookgazon.hebergratuit.net/pages.php
ta page: http://bookgazon.hebergratuit.net/page.php

dans un autre forum une personne ma dit de mettre se code

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
var produits = {
 "Délectose":{"quantite":5,"surface":10},
 "Briamide":{"quantite":3.5,"surface":5},
 "Cortofade":{"quantite":4,"surface":17}
};
 
var quantite = 0;
var surface = 0;
function eventListeners(){    document.getElementById("submitButton").addEventListener("click",calcul,false);
}
 
 
function calcul() {
 var idProduit = document.getElementById('produit').value;
 surface = produits[idProduit].surface;
 quantite = produits[idProduit].quantite;
 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; 
 // dosage produit pour un m2
 var dosage1M2 = quantite / surface;
 // dosage produit total 
 var dose = dosage1M2 * xst;
 var x = parseInt(dose*100)/100;
 // nombre de litres total
 var litres = xst / surface;
 var y = parseInt(litres*100)/100;
 // nombre de pulvérisateurs 
 var pulve = y/xcp;
 // Nombre de pulvérisateurs complets
 var pulComp = parseInt(pulve);
 if (pulComp != 0) {
  var zC = quantite * xcp;
 }
 // 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; 
 }
 // EAU DANS UN PULVERISATEUR : xcp litres
 // PRODUIT DANS UN PULVERISATEUR : produits[idProduit].quantite ml
 // SURFACE COUVERTE : surface * xcp m2
 // QUANTITE EAU TOTALE : y
 // QUANTITE PRODUIT TOTALE : x
        // NOMBRE PULVERISATEUR : pulComp
 document.getElementById("quantite_eau").value = xcp;
 document.getElementById("quantite_produit").value = produits[idProduit].quantite;
        document.getElementById("surface").value = surface * xcp;
 document.getElementById("eau_total").value = y;
 document.getElementById("produit_total").value = x;
 document.getElementById("nb_pulverisateur").value = pulComp;
}

dans ma page

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
<body background="http://bookgazon.hebergratuit.net/herbe.jpg" onload="eventListeners();">
 
<table align="center" border="1" width="50%">
 <tbody><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 id="produit" name="select" size="1">
 <option>Délectose</option>
 <option>Briamide</option>
 <option>Cortofade</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 name="textfield" id="cp" type="text">
 </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 name="textfield2" id="st" type="text">
 </form>
 <br>
 <form name="form4">
 <input name="Submit" value="Valider" id="submitButton" type="button">
 </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 name="textfield3" id="quantite_eau" type="text">
 </form>
 <br>
 <b>Quantité de produit en "ml" à mettre dans le pulverisateur:</b><br>
 <form name="form5">
 <input name="textfield4" id="quantite_produit" type="text">
 </form>
 <br>
 <b>Surface à couvrir en m2... pour un pulverisateur:</b><br>
 <form name="form5">
 <input name="textfield5" id="surface" type="text">
 </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 name="textfield3" id="eau_total" type="text">
 </form>
 <br>
 <b>Quantité de produit</b><br>
 <form name="form5">
 <input name="textfield4" id="produit_total" type="text">
 </form>
 <br>
 <b>Nombre de pulverisateur</b><br>
 <form name="form5">
 <input name="textfield5" id="nb_pulverisateur" type="text">
 </form>
 <br>
 <br>
 <b>Descriptif du produit</b><br>
 <form name="form6">
 <input name="textfield6" type="text">
 </form>
 <br>
 </td>
 </tr>
</tbody></table>
</body></html>

avec le code ci-dessus il y a l'affichage que je veux... sauf que le souci c'est qu'il y a des erreur des calculs

Exemple d'erreur de calcul rencontré
Nom : vfwf.jpg
Affichages : 246
Taille : 273,9 Ko

Nom : vfwf.jpg
Affichages : 246
Taille : 273,9 Ko

**badaze** · 19/05/2017, 15h08

Je suis vraiment désolé mais je ne comprends pas.

Si tu regardes le message #17 de cette discussion tu verras qu'il y a le code qui affiche une page comme la tienne.

**asp2p** · 19/05/2017, 16h31

message 17
sa me donne se style de page.... http://bookgazon.hebergratuit.net/new1.php
hors mon style de page est comme ceci.... http://bookgazon.hebergratuit.net/new2.php

ont vois bien la différence
mon code contient une <table> qui englobe les formulaire et surtout il y a l'affichage de l'ensemble des formulaires...

toi: seul la Liste Déroulante et les champs (Contenance pulvérisateur (L) & Surface Terrain (m2) ) sont affiché et donc pour affiché le reste il faut cliquer sur valider sinon ont vois pas les champs en dessous
moi: c'est tout les champs qui sont affiché directement

donc en gros je voudrais garder mon style de page comme ceci: http://bookgazon.hebergratuit.net/new2.php
sans avoir les champs de "résultat" caché

****************************************************************************

dans la parti ou il y a les 3 champs pulverisateur partiel et dans celle plus bas ou il y a qu'un champ nombre de pulverisateur partiel
sois ont affiche les champs mais ont laisse vide ou alors affiché 0
ou sois ont utilise la technique que tu a utiliser dans ton code ( c'est a dire masqués juste les champs pulvérisateur partiel et les affiché que SI pulverisateur partiel il y a sinon ont affiche pas les champs dans la page )

franchement je vois plus comment je peut t'expliquer mieux car j'ai pourtant fait le plus simple du monde

**badaze** · 19/05/2017, 17h25

Franchement, tu t'arrêtes sur des détails.

**asp2p** · 19/05/2017, 18h08

je m'arrête pas sur des détails pourquoi dit tu ça ?

je veut juste que ma page sois comme je l'aurait souhaiter... c'est un peut normal tu trouve pas...
après je te demande pas spécialement à toi car comme dit bien souvent je suis pas la pour t'imposer des choses ni t'embêter
d'où pourquoi j'ai demander si quelqu'un d'autre peut par l'intermédiaire de ton code me mettre le style de ma page en place

donc j'espère que quelqu'un pourra m'aider
en tout cas désolé de t'embêter avec cette histoire

**asp2p** · 28/05/2017, 15h26

Re Bonjour à tous
bon j'ai enfin réussi à mettre le code comme je le souhaité avec l'aide de quelques personnes
sauf que j'ai toujours des erreurs de calcul que je comprend pas comment résoudre

Fichier HTML

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Calculatrice Engrais</title>
	<meta name="viewport" content="width=device-width" />
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Calculatrice: pour bien calculer le dosage d'un produit</h3>
<fieldset>
<legend>Informations</legend>
<p><h5>Produits:</h5><h6>Veuillez choisir le produit que vous souhaitez utilisez</p></h6>
<select id="produit">
	<option value="x">Sélectionner un produit</option>
	<option value="0">Algifol Green</option>
	<option value="1">Calitech</option>
	<option value="2">Feraway</option>
	<option value="3">Final K</option>
	<option value="4">Humactiv</option>	
	<option value="5">Kick</option>
	<option value="6">Magnitec</option>
	<option value="7">Nitron</option>
	<option value="8">Phospho Green</option>	
	<option value="9">Protector</option>
	<option value="10">Ruter AA</option>	
	<option value="11">Vitarel</option>	
</select>
 
<div id="info">
</div> 
 
<h5>Pulverisateur :</h5>
<h6><p>Indiquez la quantité de votre pulvérisateur en litre</p></h6>
<input type="text" id="cp" value="0" />
 
<h5>Superficie du terrain :</h5>
<h6><p>Indiquez la superficie de votre terrain en m2</p></h6>
<input type="text" id="st" value="0" />
 
<div>
	<button id="bouton-calculer">Valider</button>
</div>
</fieldset>
 
<fieldset>
<legend>Resultat Unité</legend>
<!-- Résultat -->
<h5>Vous devez mettre dans votre pulverisateur :</h5>
 
<h6>Quantité d'eau en "L" à  mettre dans votre pulvérisateur :</h6>
<div>
	<input type="text" disabled value="" id="resultat_q_eau_pulv" />
</div>
 
<h6>Quantité de produit en "ml" à  mettre dans votre pulvérisateur :</h6>
<div>
	<input type="text" disabled value="" id="resultat_q_produit_pulv" />
</div>
 
<h6>Surface à couvrir en m2 pour un pulverisateur :</h6>
<div>
	<input type="text" disabled value="" id="resultat_surface" />
</div>
</fieldset>
<fieldset>
<legend>Resultat Total</legend>
<h5>Quantité totale pour faire tout votre terrain :</h5>
 
<h6>Quantité d'eau :</h6>
<div>
	<input type="text" disabled value="" id="resultat_q_eau_totale" />
</div>
 
<h6>Quantité de produit :</h6>
<div>
	<input type="text" disabled value="" id="resultat_q_produit_totale" />
</div>
 
<h6>Nombre de pulvérisateurs :</h6>
<div>
	<input type="text" disabled value="" id="resultat_n_pulverisateurs" />
</div>
</fieldset>
<fieldset>
<legend>Déscriptif du produit</legend>
<div>
	<textarea disabled id="resultat_descriptif_produit"></textarea>
</div>
</fieldset>
 
<script src="js/calcul.js"></script>
</body>
</html>

Fichier JavaScript

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
// ---------------------------
// 1 initialisation
// ---------------------------
 
var produits = [
{'produit':'Algifol Green','quantite':5,'surface':10,'description':"description de Algifol Green"},
{'produit':'Calitech','quantite':5,'surface':10,'description':"description de Calitech"},
{'produit':'Feraway','quantite':100,'surface':10,'description':"description du Feraway"},
{'produit':'Final K','quantite':3,'surface':10,'description':"description de Final K"},
{'produit':'Humactiv','quantite':25,'surface':10,'description':"description de Humactiv"},
{'produit':'Kick','quantite':2.8,'surface':10,'description':"description du Kick"},
{'produit':'Magnitech','quantite':5,'surface':10,'description':"description de Magnitech"},
{'produit':'Nitron','quantite':1,'surface':10,'description':"description de Nitron"},
{'produit':'Phospho Green','quantite':1,'surface':10,'description':"description de Phospho Green"},
{'produit':'Protector','quantite':5,'surface':10,'description':"description du Protector"},
{'produit':'Ruter AA','quantite':5,'surface':10,'description':"description de Ruter AA"},
{'produit':'Vitarel','quantite':25,'surface':10,'description':"description du Vitarel"}
];
 
var quantite = 0;
var surface = 0;
 
var valeur_defaut = 'non calculée';
document.getElementById('resultat_q_eau_pulv').value = valeur_defaut;
document.getElementById('resultat_q_produit_pulv').value = valeur_defaut;
document.getElementById('resultat_surface').value = valeur_defaut;
document.getElementById('resultat_q_eau_totale').value = valeur_defaut;
document.getElementById('resultat_q_produit_totale').value = valeur_defaut;
document.getElementById('resultat_n_pulverisateurs').value = valeur_defaut;
document.getElementById('resultat_descriptif_produit').value = valeur_defaut;
 
 
document.getElementById('bouton-calculer').onclick = function () {
 
	// ---------------------------
	// 1 vérification de la saisie
	// ---------------------------
 
	var idProduit = document.getElementById('produit').value;
	if ( idProduit== "x" ) {
	alert("Sélectionner un produit !!!");
	return;
	}
	if (isNaN(document.getElementById('cp').value)) {
	alert("Contenance pulvérisateur incorrecte !!!");
	return; 
	}
	if (document.getElementById('cp').value <= 0) {
	alert("Contenance pulvérisateur incorrecte !!!");
	return; 
	} 
	if (isNaN(document.getElementById('st').value)) {
	alert("Surface terrain incorrecte !!!");
	return; 
	} 
	if (document.getElementById('st').value <= 0) {
	alert("Surface terrain incorrecte !!!");
	return; 
	} 
 
	// ---------
	// 2 calculs
	// ---------
 
	quantite = 0;
	surface = 0; 
	var xcp = document.getElementById('cp').value; 
	var xst = document.getElementById('st').value;
 
	quantite = produits[idProduit].quantite;
	surface = produits[idProduit].surface; 
	document.getElementById('info').innerHTML = "Dosage = "+quantite+" ml par litre et 1 litre pour "+surface+" m2";
 
	// dosage produit pour un m2
	var dosage1M2 = quantite / surface;
 
	// dosage produit total 
	var dose = dosage1M2 * xst;
	var x = parseInt(dose*100)/100;
 
	// nombre de litres total
	var litres = xst / surface;
	var y = parseInt(litres*100)/100;
 
	// nombre de pulvérisateurs 
	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";
	}
 
	// 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; 
	}
 
	xSurface = surface * xcp;
 
	// -------------------------
	// 3 affichage des résultats
	// -------------------------
 
	if (pulComp != 0) {
		document.getElementById('resultat_q_eau_pulv').value = xcp + ' L';
		document.getElementById('resultat_q_produit_pulv').value = zC + ' ml';
		document.getElementById('resultat_surface').value = xSurface + ' m2';
	}
	if (pulPart != 0) {
		document.getElementById('resultat_q_eau_pulv').value = w + ' L';
		document.getElementById('resultat_q_produit_pulv').value = z + ' ml';
		document.getElementById('resultat_surface').value = xSurface + ' m2';
	}
 
	document.getElementById('resultat_q_eau_totale').value = y + ' L';
	document.getElementById('resultat_q_produit_totale').value = x + ' ml';
 
	if (pulComp != 0) {
	libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
	document.getElementById('resultat_n_pulverisateurs').value = "- "+pulComp+" "+libelle+" de "+xcp+" L";
	} 
 
	if (pulPart != 0) {	
	document.getElementById('resultat_n_pulverisateurs').value = "- 1 pulvérisateur de "+w+" L ";;
	}
 
	document.getElementById('resultat_descriptif_produit').value = produits[idProduit].description;
}

Fichier CSS

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
 html {
 	font-family:verdana;
 	font-size:16px;
}
body {
 	padding-bottom:100px;
}
 
fieldset {
  margin-bottom: 15px;
  padding: 10px;
}
 
legend {
  padding: 0px 3px;
  font-weight: bold;
  font-variant: small-caps;
}
 
input[type="text"],textarea, select {
	font-size:0.9rem;	
}
 
textarea {
	width:300px;
	height:80px;
}
 
#bouton-calculer{
	padding:10px;
	font-size:1rem;
	margin-top:20px;
	transition:0.5s;
}
 
#bouton-calculer:hover{
	color:#777;	
}
h3 {color:black}
h5 {color:red}
h6 {color:blue}

si quelqu'un peut m'aider a les résoudre se serait parfait car c'est le seul problème qu'il me reste

en gros
je choisi dans la liste "algifol green" + pulvérisateur "1" + surface terrain "100"
je choisi dans la liste "algifol green" + pulvérisateur "2" + surface terrain "100"
je choisi dans la liste "algifol green" + pulvérisateur "3" + surface terrain "100"
je choisi dans la liste "algifol green" + pulvérisateur "4" + surface terrain "100"
je choisi dans la liste "algifol green" + pulvérisateur "5" + surface terrain "100"

au deux erreurs de calcul ci-dessus il me donne comme résultat...

je choisi dans la liste "algifol green" + pulvérisateur "3" + surface terrain "100" ( mauvais calcul )

Quantité d'eau en "L" à mettre dans votre pulvérisateur : 1L ( normalement c'est... 3L )
Quantité de produit en "ml" à mettre dans votre pulvérisateur : 5ml ( normalement c'est... 15ml )
Nombre de pulvérisateurs : -1 Pulvérisateur de 1L ( normalement c'est.... 3 Pulvérisateur de 3L dont 1 Pulvérisateur partiel de 1L )

je choisi dans la liste "algifol green" + pulvérisateur "4" + surface terrain "100" ( mauvais calcul )

Quantité d'eau en "L" à mettre dans votre pulvérisateur : 2L ( normalement c'est... 4L )
Quantité de produit en "ml" à mettre dans votre pulvérisateur : 10ml ( normalement c'est... 20ml )
Nombre de pulvérisateurs : -1 Pulvérisateur de 2L ( normalement c'est.... 2 Pulvérisateur de 4L dont 1 Pulvérisateur partiel de 2L )

et sa continu avec 6, 7, 8, 9, 11 ,12, 13, 14, 16, 17, 18, 19, 21, etc etc etc

en gros pour que le calcul ne sois pas fausser il faut mettre comme ci-dessous

je choisi dans la liste "algifol green" + pulvérisateur "1" + surface terrain "100" ( mauvais calcul )
je choisi dans la liste "algifol green" + pulvérisateur "5" + surface terrain "100" ( mauvais calcul )
je choisi dans la liste "algifol green" + pulvérisateur "10" + surface terrain "100" ( mauvais calcul )

et j'ai encore une erreur ci-dessous si le pulvérisateur fait 15L

je choisi dans la liste "algifol green" + pulvérisateur "15" + surface terrain "100" ( mauvais calcul )

cette fois ci j'ai...
Surface à couvrir en m2 pour un pulvérisateur : 150m2 ( hors que le terrain fait que 100m2 )

je comprend vraiment pas comment réussir a se que le calcul se face correctement

je choisi dans la liste "algifol green" + pulvérisateur "15" + surface terrain "100" ( mauvais calcul )
je choisi dans la liste "algifol green" + pulvérisateur "20" + surface terrain "100" ( mauvais calcul )

Ps: adresse de la page de teste
http://bookgazon.hebergratuit.net/te...culatrice.html

Formulaire de calcul javascript

JavaScript

Discussions similaires

Partager

Partager