afficher le total de champs calculés

**san1981** · 08/12/2010, 10h39

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 :

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

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 :

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

**vermine** · 08/12/2010, 14h42

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 :

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

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.

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 :

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

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.

**san1981** · 08/12/2010, 15h15

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 :

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

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 :

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

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

**vermine** · 08/12/2010, 15h40

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.

**san1981** · 08/12/2010, 16h21

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 :

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

**vermine** · 08/12/2010, 18h35

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 :

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

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

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

**san1981** · 09/12/2010, 10h09

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 :

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

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 :

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

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

**vermine** · 09/12/2010, 10h52

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

Code :

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

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);
}

**san1981** · 09/12/2010, 11h08

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

**vermine** · 09/12/2010, 12h22

Au plaisir.

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

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

afficher le total de champs calculés

JavaScript

Discussions similaires

Partager

Partager