Incrémentation simple Javascript.

Version imprimable

Voilà le code Javascript qui fait un calcul sur chaque ligne du tableau généré par le code php.

Code:

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:

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 !

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:

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

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

10/06/2011, 15h51
andry.aime

As-tu essayé mon code :koi:
As-tu pris en compte mes remarques :koi:

Citation:

<script language="Javascript">

Code:

<script type="text/javascript">

A+.

Je dois avouer que j'ai pas vraiment compris.

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

10/06/2011, 16h07
andry.aime

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

Salut,

C'est à cause du

Code:

return TOTAL;

Essaie comme ceci...

Code:

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:

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

et la fonction JS deviendrait :

Code:

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>

10/06/2011, 16h15
hacker64

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