afficher le total de champs calculés

Version imprimable

Bonjour à tous,

Je réalise un formulaire où lors de l'introduction de données dans le champ "reprise", un calcul se fait automatiquement en multipliant le champ "reprise" par les champs "prix" et "pourcentage" et s'affiche automatiquement dans le champ "résultat" de chaque produit concerné. Ceci pour chaque ligne de produits qui est récupérée via ma base de données sql.

Je voudrais qu'un total s'affiche en bas du formulaire dans un champ "total" qui reprendrait les montants introduits dans le champ "résultat" de tous les produits. J'ai essayé plusieurs méthodes mais rien ne fonctionne :-(

Quelqu'un aurait-il une idée pour m'orienter vers une solution?

Merci à tous :-)

Voici mon code js actuel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function calcul(nbLigne)
{
	var pourcentage = document.getElementById("pourcentage"+nbLigne).value;
	var reprise = document.getElementById("reprise"+nbLigne).value;
	var prix = document.getElementById("prix"+nbLigne).value;
	document.getElementById("resultat"+nbLigne).value = pourcentage * reprise * prix;
}
 
function total() {
	var total = document.getElementById("resultat""+i+".value);
  	document.getElementById("total").value = total;
}

Le code de mon formulaire:

Code:

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
<?php
   $db2 = mysql_connect("localhost", "root", "");
   if (!$db2)
   {echo "Impossible de se connecter à la base de données : " . mysql_error();
    exit;}
 
   if (!mysql_select_db("madb",$db2))                                        
   {echo "erreur:" . mysql_error();
    exit;}                                                                     
?>
 
<form class="form" method="POST" enctype="multipart/form-data" >
 
<table class="converterformtable">
	<tr>
		<th>Nr.Art.</th>
		<th>Produit</th>
		<th>Prix</th>
		<th>%</th>
		<th>Reprise</th>
		<th>Valeur</th>
	</tr>
 
	<?php
        $retour = mysql_query('SELECT * FROM products ORDER BY ID ASC');
        $i=0;
        while ($donnees = mysql_fetch_array($retour)){
        ?>
 
	<tr>
		<td><?php echo $donnees['art']; ?></td>
		<td><?php echo $donnees['product']; ?></td>
		<td><input type="text" value="<?php echo $donnees['pricephie']; ?>" onkeyup="calcul(<?php echo $i; ?>)" id="prix<?php echo $i; ?>" name="prix" style="width: 50px"/></td>
		<td><input type="text" id="pourcentage<?php echo $i; ?>" onkeyup="calcul(<?php echo $i; ?>)" value="<?php echo $donnees['percentage']; ?>" /></td>
		<td><input type="text" value="" id="reprise<?php echo $i; ?>" name="reprise" style="width: 50px"  onkeyup="calcul(<?php echo $i; ?>)"/></td>
		<td><input type="text" id="resultat<?php echo $i; ?>" value=""/>
		</td>
	</tr>
	<?php
        $i++;}
        ?>
	<tr>
		<td colspan="5">Total:</td>
		<td><input type="text" id="total" value=""/>
	</tr>
	</table>
</form>

08/12/2010, 14h42
vermine
Bonjour,

Nous préférons avoir le code HTML généré plutôt que le code source PhP. ;)

Ce code-ci est étrange :
Code:

1 2 3 4 5 function total() { var total = document.getElementById("resultat""+i+".value); document.getElementById("total").value = total; }
Outre un " en trop, le .value se fait après la parenthèse, pas dedans. :P
Mais ça ne règlera pas votre problème. Je ne sais pas ce que vaut "i" à ce niveau mais peu importe. Il serait mieux de mettre un name identique à vos totaux et de faire une boucle sur ce name :
Code:

1 2 3 4 5 6 var tab_totaux = document.getElementsByName("le_nom"); var total = 0; for(var i=0; i<tab_totaux.length; i++) { total += tab_totaux[i]; }
Avec des parseInt ou parseFloat aux bons endroits. ;)

Bonjour Vermine,

Merci pour ton aide :-)

J'ai essayé d'adapter mon code selon ce que tu me proposes mais ça ne fonctionne pas, je ne sais pas trop où je fais de travers :?

Je remets mon code javascript et php et alors j'ajoute en-dessous le code généré en html.

Le javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function calcul(nbLigne){
	var pourcentage = document.getElementById("pourcentage"+nbLigne).value;
	var reprise = document.getElementById("reprise"+nbLigne).value;
	var prix = document.getElementById("prix"+nbLigne).value;
	document.getElementById("resultat"+nbLigne).value = pourcentage * reprise * prix;
}
 
function total() {
	var tab_totaux = document.getElementsByName("subtotaux");
	var total = 0;
	for(var i=0; i<tab_totaux.length; i++)			{
		total += tab_totaux[i];
	}
	document.getElementById("total").value = total;
}

mon formulaire php:

Code:

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
 
 
<form class="form" method="POST" enctype="multipart/form-data" >
 
<table class="converterformtable">
 
<?php
        $retour = mysql_query('SELECT * FROM products ORDER BY ID ASC');
$i=0;
while ($donnees = mysql_fetch_array($retour))   {
        ?>
 
	<tr>
		<td><?php echo $donnees['art']; ?></td>
		<td><?php echo $donnees['product']; ?></td>
		<td><input type="text" value="<?php echo $donnees['pricephie']; ?>" onkeyup="calcul(<?php echo $i; ?>)" id="prix<?php echo $i; ?>" name="prix" style="width: 50px"/></td>
		<td><input type="text" id="pourcentage<?php echo $i; ?>" onkeyup="calcul(<?php echo $i; ?>)" value="<?php echo $donnees['percentage']; ?>" /></td>
		<td><input type="text" value="" id="reprise<?php echo $i; ?>" name="reprise" style="width: 50px"  onkeyup="calcul(<?php echo $i; ?>)"/></td>
		<td><input type="text" id="resultat<?php echo $i; ?>" value="" name="subtotaux" onchange="total()"/>
		</td>
	</tr>
	<?php
        $i++;   }
        ?>
	<tr>
		<td colspan="5">Total:</td>
		<td><input type="text" id="total" value=""/>
	</tr>
</table>
</form>

et le code généré en html:

Code:

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
<form class="form" method="POST" enctype="multipart/form-data" >
 
	<table class="converterformtable">
 
	<tr>
		<td>1</td>
		<td>Produit 1</td>
 
		<td><input type="text" value="3.92" onkeyup="calcul(0)" id="prix0" name="prix" style="width: 50px"/></td>
		<td><input type="text" id="pourcentage0" onkeyup="calcul(0)" value="0.75" /></td>
		<td><input type="text" value="" id="reprise0" name="reprise" style="width: 50px"  onkeyup="calcul(0)"/></td>
		<td><input type="text" id="resultat0" value="" name="subtotaux" onchange="total()"/>
		</td>
	</tr>
 
	<tr>
		<td>2</td>
 
		<td>Produit 2</td>
		<td><input type="text" value="1.69" onkeyup="calcul(1)" id="prix1" name="prix" style="width: 50px"/></td>
		<td><input type="text" id="pourcentage1" onkeyup="calcul(1)" value="0.75" /></td>
		<td><input type="text" value="" id="reprise1" name="reprise" style="width: 50px"  onkeyup="calcul(1)"/></td>
		<td><input type="text" id="resultat1" value="" name="subtotaux" onchange="total()"/>
		</td>
	</tr>
 
	<tr>
 
		<td>3</td>
		<td>Produit 3</td>
		<td><input type="text" value="1.71" onkeyup="calcul(2)" id="prix2" name="prix" style="width: 50px"/></td>
		<td><input type="text" id="pourcentage2" onkeyup="calcul(2)" value="0.75" /></td>
		<td><input type="text" value="" id="reprise2" name="reprise" style="width: 50px"  onkeyup="calcul(2)"/></td>
		<td><input type="text" id="resultat2" value="" name="subtotaux" onchange="total()"/>
		</td>
	</tr>
 
	<tr>
		<td colspan="5">Total:</td>
		<td><input type="text" id="total" value=""/>
	</tr>
 
	</table>
</form>

08/12/2010, 15h40
vermine

C'est déjà pas mal. Par contre le onchange ne se déclenchera que par une action humaine. Donc vous devez également appeler votre fonction total() à la fin de la fonction calcul().

N'oubliez pas d'utiliser les parseFloat lors de vos calculs ! Sinon il fera une concaténation. Et je vous l'annonce déjà, parseFloat du vide renvoi NaN. Ce cas est donc à gérer. ;)

J'ai adapté quelques petites choses comme le parseFloat (et fixer les décimales à 2 pour éviter les décimales interminables) mais je ne vois toujours rien dans total, comme je ne reçois pas de message d'erreur c'est difficile de voir où je me trompe :?

mon code js:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function calcul(nbLigne) { var pourcentage = document.getElementById("pourcentage"+nbLigne).value; var reprise = document.getElementById("reprise"+nbLigne).value; var prix = document.getElementById("prix"+nbLigne).value; document.getElementById("resultat"+nbLigne).value = parseFloat(pourcentage * reprise * prix).toFixed(2); } function total() { var tab_totaux = document.getElementsByName("subtotaux"); var tot = 0; for(var i=0; i<tab_totaux.length; i++) { tot += tab_totaux[i]; } document.getElementById("total").value = parseFloat(tot).toFixed(2); }
Pour le reste, le code php et le code généré en html n'a pas changé.

Avez-vous une idée d'où se situe mon problème?

08/12/2010, 18h35
vermine

Citation:

Envoyé par vermine

C'est déjà pas mal. Par contre le onchange ne se déclenchera que par une action humaine. Donc vous devez également appeler votre fonction total() à la fin de la fonction calcul().

;)

Et pour le parseFloat et le .value je voyais plutôt la chose comme ça :

Code:

tot += parseFloat(tab_totaux[i].value);

:P

Mais ça ne suffira pas comme ça, vous verez avec vos tests. ;)

Merci beaucoup pour votre aide.

Je pense que j'avance sur le code mais je n'obtiens toujours pas le résultat voulu. Maintenant j'ai le script en texte qui s'affiche dans mon champ "final", quand je regarde mon fichier html, je vois donc dans le champ "final" le texte du script "function total() {etc...}" mais le calcul ne se fait pas?

Le code javascript modifié:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
function total() {
	var tot = 0;
	var tabtotaux = document.getElementsByName("subtotaux");
	for(var i = 0; i < tabtotaux.length; i++){
	   tot += parseFloat(tabtotaux[i].value).toFixed(2);			 
           if (isNaN(tot) == false){
	   total += tot;}
	}
	document.getElementById("final").value = total;
}

le code de mon formulaire:

Code:

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
 
 
<form class="form" method="POST" enctype="multipart/form-data" >
 
<table class="converterformtable">
 
 
<?php
$retour = mysql_query('SELECT * FROM products ORDER BY ID ASC');
$i=0;
while ($donnees = mysql_fetch_array($retour))
{
?>
 
<tr>
	<td><?php echo $donnees['art']; ?></td>
	<td><?php echo $donnees['product']; ?></td>
	<td><input type="text" value="<?php echo $donnees['pricephie']; ?>" onkeyup="calcul(<?php echo $i; ?>);total()" id="prix<?php echo $i; ?>" name="prix" style="width: 50px"/></td>
	<td><input type="text" id="pourcentage<?php echo $i; ?>" onkeyup="calcul(<?php echo $i; ?>);total()" value="<?php echo $donnees['percentage']; ?>" /></td>
	<td><input type="text" value="" id="reprise<?php echo $i; ?>" name="reprise" style="width: 50px"  onkeyup="calcul(<?php echo $i; ?>);total()"/></td>
	<td><input type="text" id="resultat<?php echo $i; ?>" value="" name="subtotaux"/>
	</td>
</tr>
<?php
$i++;   }
?>
<tr>
	<td colspan="5">Total:</td>
	<td><input type="text" id="final" value=""/>
</tr>
</table>
</form>

le code généré en html:

Code:

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
 
<form class="form" method="POST" enctype="multipart/form-data" >
<table class="converterformtable">
<tr>
	<td>1</td>
	<td>Produit 1</td>
	<td><input type="text" value="3.92" onkeyup="calcul(0);total()" id="prix0" name="prix"/></td>
 
	<td><input type="text" id="pourcentage0" onkeyup="calcul(0);total()" value="0.75" /></td>
	<td><input type="text" value="" id="reprise0" name="reprise"  onkeyup="calcul(0);total()"/></td>
	<td><input type="text" id="resultat0" value="" name="subtotaux" onchange="total()"/>
	</td>
</tr>
 
<tr>
	<td>2</td>
	<td>Produit 2</td>
	<td><input type="text" value="1.69" onkeyup="calcul(1);total()" id="prix1" name="prix"/></td>
	<td><input type="text" id="pourcentage1" onkeyup="calcul(1);total()" value="0.75" /></td>
	<td><input type="text" value="" id="reprise1" name="reprise" onkeyup="calcul(1);total()"/></td>
	<td><input type="text" id="resultat1" value="" name="subtotaux" onchange="total()"/>
	</td>
</tr>
<tr>
	<td colspan="5">Total:</td>
	<td><input type="text" id="final" value=""/>
</tr>
</table>
</form>

Merci pour les suggestions :-)

Il y a de l'idée !

C'est plutôt bien mais il y a quelques inversions :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function total() {
	var tot = 0;
	var tabtotaux = document.getElementsByName("subtotaux");
	for(var i = 0; i < tabtotaux.length; i++){
                //si le champ est vide, je ne l'ajoute pas car parseFloat va râler
	   if(tabtotaux[i].value != ""){
                   //je dois (j'avais oublié de le préciser) faire un parseFloat sur les deux nombres que j'aditionne
	      tot = parseFloat(tot) + parseFloat(tabtotaux[i].value);
	   }
	}
             //je peux fixer les décimal ici
	document.getElementById("final").value = parseFloat(tot).toFixed(2);
}

09/12/2010, 11h08
san1981

Super ça fonctionne parfaitement!
Un grand merci pour votre aide très efficace, j'ai appris beaucoup de choses :-)
09/12/2010, 12h22
vermine

\o/

Au plaisir. :D

Merci à vous. Vous avez essayez par vous-même contrairement à d'autres membres qui attendent qu'on le fasse à leur place (les filous). :P

On préfère quelqu'un qui essaie mais qui se trompe ou qui découvre. Ca nous encourage à répondre. ;)

Vous pouvez marquer le topic comme étant [résolu] (voir bouton en bas de la discussion).