Calcul en direct depuis des inputs

**guigui69** · 30/12/2007, 13h58

Bonjour à tous, je réalise un site php avec une base de donnée. Et la j'aurai besoin de réaliser une partie en javascript pour calculer automatiquement les chiffre dans des cases.

En fait , la page va me chercher dans ma base l'ensemble des produit voulus en fonction du fournisseur et me les affiche dans la page web. En plus de cela j'ai rajouter 2 case qui sont la quantité et le total.

Je voudrait qu'a chaque fois que je modifie la quantité cela effectue le calcul directement dans la 4 ème colonne le montant.

étant donné que je débute en javascript, j'ai essayer de réaliser la page avec le script javascript (et ayant récuperer des information sur internet). Ca ne fonctionne pas.

Donc si quelqu'un pourrait m'indiquez mon erreur dans la page, car la page s'affiche bien mais j'ai beau mettre n'importe quel chiffre rien ne se passe.

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
 
<html lang="fr">
 
 
 
<script language="javascript">
 
function calculTotal(pNum){
 
document.all['montant'+pNum].value =  parseFloat(document.all['pu[]'+pNum].value) *  parseFloat(document.all['qte[]'+pNum].value);
 
 
 
}
 
 
 
</script>
 
 
 
<head>
 
<body>
 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
 
 
 
 
 
 
 
    <?php
 
 
 
$server="****";
 
$user="******";
 
$pass="*****";
 
$db="pdr";
 
mysql_connect($server,$user,$pass) or die('erreur de connexion');
 
mysql_select_db($db) or die ('impossible de se connecter a la base'); 
 
 
 
 
 
$sql = "SELECT nom_m, pu_m FROM matiere WHERE four_m='EUROGERM'";
 
    $req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
 
        
 
$res = mysql_num_rows($req);
 
 
 
    if($res==0)  
 
        {
 
        echo '<font color="red">D&eacute;sol&eacute;, aucune matiere est attribue a ce fournisseur.</font>';
 
        echo '<INPUT TYPE="BUTTON" VALUE=" Retour "onClick="history.back()">';
 
                echo '<br>';
 
                }
 
                
 
   else
 
   {
 
   echo $res;
 
   echo '<form name="enr"><table>';
 
   $nb = 0;
 
   while ( $ligne = mysql_fetch_array( $req ))
 
   { $nb =$nb+1 
 
   
 
   
 
   ?>
 
 
 
 
 
	<tr>
 
	<td><input type="texte" name="des<?php echo $nb;?>" value="<?php echo $ligne["nom_m"]; ?>"></td>
 
	<td><input type="texte" name="pu<?php echo $nb;?>" value="<?php echo $ligne["pu_m"]; ?>" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
 
	<td><input type="texte" name="qte<?php echo $nb;?>" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
 
	<td><input type="texte" name="montant<?php echo $nb;?>"> € </td>
 
	</tr>
 
	<?php
 
        }
 
 
 
        echo '</table>';
 
        }
 
        ?>
 
</body>
 
</html>

Merci d'avance pour vos réponses

guigui69

**gui8676** · 30/12/2007, 15h05

Salut,

Essai de mettre onchange="calculTotal(<?php echo $nb;?>)" à la place de onkeyup="calculTotal(<?php echo $nb;?>)"

Mais je ne suis pas sur du tout.

**jln13** · 30/12/2007, 15h17

salut,

effectivement, tu as pas mal de problèmes dans ta page ^^. Commençons par réorganiser ta structure HTML :

<html lang="fr">

<script language="javascript">
function calculTotal(pNum)
{
document.all['montant'+pNum].value = parseFloat(document.all['pu[]'+pNum].value) * parseFloat(document.all['qte[]'+pNum].value);
}
</script>

<head>
<body>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

Tu ouvres le head après ton javascript, tu ouvres le body sans avoir fermé le head, tu mets la balise meta dans le body.. c'est pas très propre tout ca, en gros tu dois faire ca deja :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<html lang="fr">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<script type="text/javascript">
	...
	</script>
</head>
<body>

Ensuite :

<input type="texte" name="des<?php echo $nb;?>" value="<?php echo $ligne["nom_m"]; ?>">

Ici t'as plusieurs problèmes aussi:
- type="texte" => type="text"
- utilises des id au lieu des name
- dans ta value, les guillemets que tu utilises autour de nom_m ferment les guillemets de value tu dois utiliser des \ devant pour éviter tout problème.

Tu n'as pas non plus fermé ta balise form, etc.. mais bon arretons la.

Maintenant venons a ton problème de javascript.. je t'ai viré les document.all et j'ai utilisé des document.getElementById a la place. J'ai aussi enlevé les [] en trop :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('montant'+pNum).value = parseFloat(document.getElementById('pu'+pNum).value * document.getElementById('qte'+pNum).value);

voila ca doit marcher normalement.. t'obtiens un truc du genre si ca marche :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<script type="text/javascript">
	<!--
	function calculTotal(pNum)
	{
		document.getElementById('montant'+pNum).value = parseFloat(document.getElementById('pu'+pNum).value * document.getElementById('qte'+pNum).value);
	}
	-->
	</script>
</head>
<body>
 
 
<div>2 reponses</div>
 
<form id="enr" action="">
<table>	
 
	<tr>
 
		<td><input type="text" id="des1" value="nom_m1" /></td>
 
		<td><input type="text" id="pu1" value="50" onkeyup="calculTotal(1)" /></td>
 
		<td><input type="text" id="qte1" onkeyup="calculTotal(1)" /></td>
 
		<td><input type="text" id="montant1" /> € </td>
 
	</tr>
 
	<tr>
 
		<td><input type="text" id="des2" value="nom_m2" /></td>
 
		<td><input type="text" id="pu2" value="110" onkeyup="calculTotal(2)" /></td>
 
		<td><input type="text" id="qte2" onkeyup="calculTotal(2)" /></td>
 
		<td><input type="text" id="montant2" /> € </td>
 
	</tr>
 
 
 
</table>
</form>
</body>
 
</html>

**guigui69** · 31/12/2007, 09h34

Merci pour ton aide, c'est vrai j'avais vu mes erreurs html trop tard (apres avoir poster le message).

Voici mon 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="fr">
<head>
<title> Page Fax Fournisseur</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script language="javascript">
function calculTotal(pNum){
document.getElementById('montant'+pNum).value =  parseFloat(document.getElementById('pu'+pNum).value * document.getElementById('qte'+pNum).value);
 
}
 
</script>
 
</head>
<body>
 
 
 
 
<?php
 
$server="****";
$user="****";
$pass="*****";
$db="pdr";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base'); 
 
 
$sql = "SELECT nom_m, pu_m FROM matiere WHERE four_m='EUROGERM'";
    $req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
        
$res = mysql_num_rows($req);
 
    if($res==0)  
        {
        echo '<font color="red">D&eacute;sol&eacute;, aucune matiere est attribue a ce fournisseur.</font>';
        echo '<INPUT TYPE="BUTTON" VALUE=" Retour "onClick="history.back()">';
                echo '<br>';
                }
                
   else
   {
   echo $res;
   echo '<form name="enr"><table BORDER=0>';
   echo '<tr>';
   echo '<td><u>description du Produit:</u></td><td><u>Prix unitaire:</u></td><td><u>Quantit&eacute;:</u></td><td><u>Total:</u></td>';
        
   $nb = 0;
   while ( $ligne = mysql_fetch_array( $req ))
   { $nb =$nb+1 
   
   
   ?>
 
 
	<tr>
	<td><?php echo $ligne["nom_m"]; ?></td>
	<td><input type="text" id="pu<?php echo $nb;?>" value="<?php echo $ligne["pu_m"]; ?>" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="qte<?php echo $nb;?>" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="montant<?php echo $nb;?>"size="7" > &euro; </td>
	</tr>
	<?php
        }
 
        echo '</table></form>';
        }
        ?>
</body>
</html>

La page fonctionne fonctionne, mais j'étais obliger de laisser les " dans

$ligne["pu_m"];

.

Encore une petite question:

je voudrait mettre par défaut dans la case quantité (qte) 0 (value = "0") mais si je met ca, le calcul ne se refait directement dans la case "montant"(au chargement de la page) je suis obliger de repasser par toute les cases et remettre 0.

Quel code javascript pourrait faire ca?

Merci d'avance

guigui69

**guigui69** · 31/12/2007, 12h07

Re bonjour à tous, je cherche aussi comment faire la somme total des montants.

J'ai essayer divers code javascript mais je trouve pas.

Merci d'avance pour votre aide

guigui69

**jln13** · 31/12/2007, 12h53

Encore une petite question:

je voudrait mettre par défaut dans la case quantité (qte) 0 (value = "0") mais si je met ca, le calcul ne se refait directement dans la case "montant"(au chargement de la page) je suis obliger de repasser par toute les cases et remettre 0.

Quel code javascript pourrait faire ca?

Pourquoi passer par javascript pour faire ca ? Le plus simple est d'initialiser les value qte et montantX a 0 côté serveur..

M'enfin si tu veux faire ca en javascript tu as juste besoin de connaitre le nombre de champ. Ensuite tu appelles la fonction calculTotal sur chacun des champs.
Puis tu appelles cette fonction de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<body onload="totalChamps();">

Re bonjour à tous, je cherche aussi comment faire la somme total des montants.

J'ai essayer divers code javascript mais je trouve pas.

Quel code as tu essayé ?...
Tu as juste besoin de boucler sur tous tes champs pour faire ce calcul, du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
for(i=1;i<nb_champs;i++)
{
document.getElementById('total').value = parseFloat(document.getElementById('total').value) + parseFloat(document.getElementById('montant'+i).value);
}

**guigui69** · 31/12/2007, 14h55

Merci pour ta réponse, le code que j'avait testé ressemblait au code que tu as donnée.

voici mon 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
75
76
77
78
79
80
81
82
83
84
85
86
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="fr">
<head>
<title> Page Fax Fournisseur</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script language="javascript">
function calculTotal(pNum){
document.getElementById('montant'+pNum).value =  parseFloat(document.getElementById('pu'+pNum).value * document.getElementById('qte'+pNum).value);
var nbLignes = document.getElementById("tab").rows.length;
document.getElementById('montanttotal').value = 0;
for (i=1;i<nbLignes;i++)
{
document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value);  
}
 
 
 
 
}
</script>
 
</head>
<body>
 
 
 
 
<?php
 
$server="*****";
$user="****";
$pass="*****";
$db="pdr";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base'); 
 
 
$sql = "SELECT nom_m, pu_m FROM matiere WHERE four_m='EUROGERM'";
    $req = mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); 
        
$res = mysql_num_rows($req);
 
    if($res==0)  
        {
        echo '<font color="red">D&eacute;sol&eacute;, aucune matiere est attribue a ce fournisseur.</font>';
        echo '<INPUT TYPE="BUTTON" VALUE=" Retour "onClick="history.back()">';
                echo '<br>';
                }
                
   else
   {
   echo $res;
   echo '<form name="enr"><table id="tab" BORDER=0>';
   echo '<tr>';
   echo '<td><u>description du Produit:</u></td><td><u>Prix unitaire:</u></td><td><u>Quantit&eacute;:</u></td><td><u>Total:</u></td>';
        
   $nb = 0;
   while ( $ligne = mysql_fetch_array( $req ))
   { $nb =$nb+1 
   
   
   ?>
 
 
	<tr>
	<td><?php echo $ligne["nom_m"]; ?></td>
	<td><input type="text" id="pu<?php echo $nb;?>" value="<?php echo $ligne["pu_m"]; ?>" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="qte<?php echo $nb;?>" value="0" size="7" onkeyup="calculTotal(<?php echo $nb;?>)"></td>
	<td><input type="text" id="montant<?php echo $nb;?>" value="0" size="7" > &euro; </td>
	</tr>
	<?php
        }
 
        echo '</table></form>';
        }
        ?>
	<br>
	<form name="final">
	<table BORDER=0>
	<tr><td><u>TOTAL:</u></td><td><input type="text" id="qtetotal" size="7"></td><td><input type="text" id="montanttotal"size="7" > &euro; </td>
	</table>
	</form>
	</body>
</html>

J'ai fait les modifications dans mon script et c'est bon ça calcul, pourriez-vous verifier si j'ai pas fait d erreur dans le javascript

var nbLignes = document.getElementById("tab").rows.length;
document.getElementById('montanttotal').value = 0;
for (i=1;i<nbLignes;i++)
{
document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value);
}

Mais il y a un truc bizarre dans certain calcul elle sort beaucoup de chiffre derrière la virgule. quel en est peut la cause ? (regarder image)

ex: 2.15 * 6 = 12.899999999999999 alors que ca devrait faire 12,9.

2 petite question:

Au niveau javascript peut ton limiter 4 chiffre après la virgule? (comme pour mon soucis juste au dessus).

Pour imprimer cette page, je sais que l'on peut ajouter un bouton imprimer mais je voulait savoir si l'on pouvait aussi cacher certain détail.

exemple que je clic sur imprimer, sur ma feuille imprimer je ne voudrait pas voir le bouton imprimer par exemple.

Un grand merci pour votre aide.

guigui69

**jln13** · 31/12/2007, 15h14

re,

si ca marche je vais partir du principe qu'il n'y a pas d'erreurs ^^ (je suis pas prof hein :p)

Pour ton problème de float tu peux préciser le nombre de digit après la virgule grace a la fonction toFixed comme l'explique ce lien : http://developer.mozilla.org/en/docs...Number:toFixed

Pour l'impression, le plus simple - que je connaisse - c'est de faire un bouton qui ouvre une popup qui reprend tous les éléments avec le display que tu veux.

voili voilou..

**guigui69** · 31/12/2007, 15h38

Ok merci

Peut-tu m'eclairer sur ceci:

Pour l'impression, le plus simple - que je connaisse - c'est de faire un bouton qui ouvre une popup qui reprend tous les éléments avec le display que tu veux.

Un petit exemple que je puisse savoir ou partir et comment bien le coder (enfin essayer

)

Calcul en direct depuis des inputs

JavaScript

Discussions similaires

Partager

Partager