Incrémentation simple Javascript.

**hacker64** · 10/06/2011, 14h36

Voilà le code Javascript qui fait un calcul sur chaque ligne du tableau généré par le code 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
 
<script language="Javascript">
	function calculPrix() 
	{
	for (var Nb=0;Nb<=100;Nb++)
		{ 
		var QTE = document.getElementById("quantite"+Nb ).value; 
		var PU_HT = document.getElementById("prix_unitaire_ht"+Nb ).value; 
 
	if( QTE !="" && PU_HT !="" )
	{ 
	var TOTAL = document.getElementById("total_ht"+Nb ).value = (QTE * PU_HT).toFixed (2); 
	return TOTAL;
	} 
		}
	}	
		</script>

Le code 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
31
32
33
34
35
 
<table id="table" align="center" BORDER="1" onchange="verifPrix()">
							<tr align="center">
								<th>Description</th><th>Qt&eacute;</th><th>Prix Unitaire H.T</th><th>Total H.T</th>
							</tr>
 
						<?php
                                                        for($compteur=0; $compteur<=$NbArt-1; $compteur++)
                                                                {
                                                                echo    '<tr>
                                                                                <td><TEXTAREA name="description'.$compteur.'" id="description'.$compteur.'" rows=1 cols=40 ></TEXTAREA></td>
                                                                                <td><INPUT type="text" id="quantite'.$compteur.'" name="quantite'.$compteur.'" size="5" onchange="calculPrix()"></td>
                                                                                <td><INPUT type="text" id="prix_unitaire_ht'.$compteur.'" name="prix_unitaire_ht'.$compteur.'" size="8" onchange="calculPrix()"></td>
                                                                                <td><INPUT type="text" id="total_ht'.$compteur.'" name="total_ht'.$compteur.'" size="8" onchange="calculPrix()"></td>
                                                                                </tr>';
                                                                }
                                                ?>
							<tr>
								<td colspan="2" rowspan="4"></td>
								<td align="right"><strong>H.T</strong></td>
								<td><INPUT type="text" id="TotalHT" name="TotalHT" size="8" ></td>
							</tr>
							<tr>
								<td align="right"><strong>T.V.A 19,6%</strong></td>
								<td><INPUT type="text" name="nom" size="8"></td>
							</tr>
							<tr>
								<td align="right"><strong>PORT</strong></td>
								<td><INPUT type="text" name="nom" size="8"></td>
							</tr>
							<tr>
								<td align="right"><strong>TOTAL TTC</strong></td>
								<td><INPUT type="text" name="nom" size="8"></td>
							</tr>
						</table>

Le problème c'est qu'il fait le calcul que sur la première ligne ou sinon si on commence par la dernière ligne et qu'on remonte jusqu’à la première sa marche. Mais si je remplie ligne par ligne a partir du début il ne fait le calcul que sur la première ligne... POURQUOI ?

Merci a tous ceux qui essaye de comprendre !

**andry.aime** · 10/06/2011, 15h00

Bonsoir.

Montre nous le code html généré mais pas le code php. Il se peut que l'élément appeler dans document.getElementById() n'existe pas. Perso, je génère les bornes de la boucle for depuis php avec la valeur max de ton compteur $NbArt.

Code :

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

1
2
3
4
5
6
for (var Nb=0;Nb<=100;Nb++)
		{
if(document.getElementById("quantite"+Nb ) && document.getElementById("prix_unitaire_ht"+Nb )){ 
var QTE = document.getElementById("quantite"+Nb ).value; 
		var PU_HT = document.getElementById("prix_unitaire_ht"+Nb ).value; 
 ...........

A+.

**hacker64** · 10/06/2011, 15h28

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
 
<table id="table" align="center" BORDER="1" onchange="verifPrix()">
 
							<tr align="center">
 
								<th>Description</th><th>Qt&eacute;</th><th>Prix Unitaire H.T</th><th>Total H.T</th>
 
							</tr>
 
 
 
						<tr>
 
										<td><TEXTAREA name="description0" id="description0" rows=1 cols=40 ></TEXTAREA></td>
 
										<td><INPUT type="text" id="quantite0" name="quantite0" size="5" onchange="calculPrix()"></td>
 
										<td><INPUT type="text" id="prix_unitaire_ht0" name="prix_unitaire_ht0" size="8" onchange="calculPrix()"></td>
 
										<td><INPUT type="text" id="total_ht0" name="total_ht0" size="8" onchange="calculPrix()"></td>
 
										</tr><tr>
 
										<td><TEXTAREA name="description1" id="description1" rows=1 cols=40 ></TEXTAREA></td>
 
										<td><INPUT type="text" id="quantite1" name="quantite1" size="5" onchange="calculPrix()"></td>
 
										<td><INPUT type="text" id="prix_unitaire_ht1" name="prix_unitaire_ht1" size="8" onchange="calculPrix()"></td>
 
										<td><INPUT type="text" id="total_ht1" name="total_ht1" size="8" onchange="calculPrix()"></td>
 
										</tr><tr>
 
										<td><TEXTAREA name="description2" id="description2" rows=1 cols=40 ></TEXTAREA></td>
 
										<td><INPUT type="text" id="quantite2" name="quantite2" size="5" onchange="calculPrix()"></td>
 
										<td><INPUT type="text" id="prix_unitaire_ht2" name="prix_unitaire_ht2" size="8" onchange="calculPrix()"></td>
 
										<td><INPUT type="text" id="total_ht2" name="total_ht2" size="8" onchange="calculPrix()"></td>
 
										</tr>							<tr>
 
								<td colspan="2" rowspan="4"></td>
 
								<td align="right"><strong>H.T</strong></td>
 
								<td><INPUT type="text" id="TotalHT" name="TotalHT" size="8" ></td>
 
							</tr>
 
							<tr>
 
								<td align="right"><strong>T.V.A 19,6%</strong></td>
 
								<td><INPUT type="text" name="nom" size="8"></td>
 
							</tr>
 
							<tr>
 
								<td align="right"><strong>PORT</strong></td>
 
								<td><INPUT type="text" name="nom" size="8"></td>
 
							</tr>
 
							<tr>
 
								<td align="right"><strong>TOTAL TTC</strong></td>
 
								<td><INPUT type="text" name="nom" size="8"></td>
 
							</tr>
 
						</table>

**andry.aime** · 10/06/2011, 15h51

As-tu essayé mon code

As-tu pris en compte mes remarques

Code :

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

<script type="text/javascript">

A+.

**hacker64** · 10/06/2011, 15h56

Je dois avouer que j'ai pas vraiment compris.

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
 
		<script type="text/javascript">
 
			function calculPrix() 
 
			{
 
				for (var Nb=0;Nb<=100;Nb++)
 
					{ 
 
					if(document.getElementById("quantite"+Nb ) && document.getElementById("prix_unitaire_ht"+Nb ))
 
					{ 
 
						var QTE = document.getElementById("quantite"+Nb ).value; 
 
						var PU_HT = document.getElementById("prix_unitaire_ht"+Nb ).value; 
 
						if( QTE !="" && PU_HT !="" )
 
							{ 
 
							var TOTAL = document.getElementById("total_ht"+Nb ).value = (QTE * PU_HT).toFixed (2); 
 
							return TOTAL;
 
							} 
 
					}
 
					}
 
			}	
 
		</script>

**andry.aime** · 10/06/2011, 16h07

1- avec mon code, on vérifie d'abord si l'élément appeler avec getElementById existe. Avec ton code, tu ne testes pas or que l'élément n'éxiste pas quand NB > 2 , ainsi tu as des erreurs.

2- Si tu génères la valeur à la place 100 dans la boucle for avec la valeur de $NbArt, le nombre d'itération pourrait être réduite ou augmenté selon le cas et c'est plus sûre.

A+.

**Eric2a** · 10/06/2011, 16h08

Salut,

C'est à cause du

Code :

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

return TOTAL;

Essaie comme ceci...

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
function calculPrix(){
	var Nb,QTE,PU_HT;
	for(Nb=0;Nb<=100;Nb++){
		if(document.getElementById("quantite"+Nb ) && document.getElementById("prix_unitaire_ht"+Nb )){
			QTE = document.getElementById("quantite"+Nb ).value;
			PU_HT = document.getElementById("prix_unitaire_ht"+Nb ).value;
			if(QTE !="" && PU_HT !=""){
				document.getElementById("total_ht"+Nb ).value = (QTE * PU_HT).toFixed(2);
			}
		}
	}
}
</script>

ou mieux, ne traiter que la ligne concernée par la modification. Dans ce cas, le No de ligne est passé en paramètre comme ceci :

Code php :

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

echo '... onchange="calculPrix('.$compteur.')" ...'

et la fonction JS deviendrait :

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
function calculPrix(Nb){
	var QTE,PU_HT;
	if(document.getElementById("quantite"+Nb ) && document.getElementById("prix_unitaire_ht"+Nb )){
		QTE = document.getElementById("quantite"+Nb ).value;
		PU_HT = document.getElementById("prix_unitaire_ht"+Nb ).value;
		if(QTE !="" && PU_HT !=""){
			document.getElementById("total_ht"+Nb ).value = (QTE * PU_HT).toFixed(2);
		}
	}
}
</script>

**hacker64** · 10/06/2011, 16h15

Merci a vous deux, vous m'avez été d'une grande aide !

Incrémentation simple Javascript.

JavaScript

Discussions similaires

Partager

Partager