Calculs sur un tableau Html créé en boucle

Version imprimable

Salut,
Je suis depuis quelques jours sur ce tableaux a tenté d'en faire la somme. en javascript et je n'arrive pas.
j'ai essayé parsint +getelement getelement*1 etc mais rien.

Les lignes sont incrémentées en php (sur un BD mySQL)

et donc ca marche une fois sur deux et ca concatène les totals HT et TTC.

C'est un truc tout bête j'imagine
le JS est en bas.

Qu'en pensez-vous ? 8O

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
77
78
79
80
81
82
83
<h1><a href="Page.php">Paga</a></h1>
<?php 
 
// LIGNES  
if (!ISSET($_SESSION['Lignes']))
	{
	$_SESSION['Lignes'] = 2; // Ici le sql
	for($i=1; $i < $_SESSION['Lignes']; $i++) {
		// Declaration des sessions
		if (!ISSET($_SESSION['Designation'.$i])) {$_SESSION['Designation'.$i] = '';}
		if (!ISSET($_SESSION['Unite'.$i])) {$_SESSION['Unite'.$i] = '';}
		if (!ISSET($_SESSION['Prix'.$i])) {$_SESSION['Prix'.$i] = '';}
		if (!ISSET($_SESSION['Quantite'.$i])) {$_SESSION['Quantite'.$i] = '';}
		if (!ISSET($_SESSION['MontantHT'.$i])) {$_SESSION['MontantHT'.$i] = '';}
	}
} 
echo '$_SESSION[= '. $_SESSION['Lignes'] . '<br>';
if (ISSET($_POST['Lignes'])) { // Ajouter ligne + declarer les variables
			$_SESSION['Lignes'] = $_SESSION['Lignes'] + $_POST['Lignes'];
			$nb_lignes_avant = $_SESSION['Lignes']; 
			$nb_lignes_apres = $_SESSION['Lignes'] + $_POST['Lignes'] + 7;
			for($i=$nb_lignes_avant - 1; $i < $nb_lignes_apres; $i++) {
				// Sessions
				if (!ISSET($_SESSION['Designation'.$i])) {$_SESSION['Designation'.$i] = '';}
				if (!ISSET($_SESSION['Unite'.$i])) {$_SESSION['Unite'.$i] = '';}
				if (!ISSET($_SESSION['Prix'.$i])) {$_SESSION['Prix'.$i] = '';}
				if (!ISSET($_SESSION['Quantite'.$i])) {$_SESSION['Quantite'.$i] = '';}
				if (!ISSET($_SESSION['MontantHT'.$i])) {$_SESSION['MontantHT'.$i] = '';}
		}
	}
	echo '<p id="i">' . $i . "</p>";
?>
<form action="page.php" method="post" enctype="multipart/form-data" name="Form" style="font-size:21px ">
<table id="tableau" style=" float:right; margin-right:121px" border="1">
  <tr>
    <td class="Doc_Tableau" width="293" style="text-align:left; width:293px; "></td>   
    <td class="Doc_Tableau" width="293" style="text-align:left; width:293px; ">D&eacute;signation</td>
    <td class="Doc_Tableau" width="89" style=" width:93px;" >Unit&eacute;</td>
    <td class="Doc_Tableau" width="97" style=" width:93px;">Prix</td>
    <td class="Doc_Tableau" width="95" style=" width:95px;">Quantit&eacute;</td>
    <td class="Doc_Tableau" width="119" style=" width:119px;">Montant HT </td>
  </tr>
<?php for($i=1; $i < $_SESSION['Lignes']; $i++)
{ ?>
  <tr class="Doc_Tableau">
    <td class="Doc_Tableau" style="text-align:left; width:293px; ">&nbsp;</td>
    <td class="Doc_Tableau" style="text-align:left; width:293px; "><?php echo "la " .  $i;?>
	<select name="Designation<?php echo $i;?>" style="font-size:19px;">
	  <option <?php if ($_SESSION['Designation'.$i]== 'AAA') {echo 'AAA';}?>>AAA</option>
	</select>
	</td>
<td class="Doc_Tableau" style=" width:93px;" ><input id="Unite<?php echo $i;?>" type="text" size="7" name="Unite<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['Unite'.$i])) {echo $_SESSION['Unite'.$i];} ?>" > </td>
<td class="Doc_Tableau" style=" width:93px;"><input id="Prix<?php echo $i;?>"  type="text" size="7" name="Prix<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['Prix'.$i])) {echo $_SESSION['Prix'.$i];} ?>" value="10" ></td>
<td class="Doc_Tableau" style=" width:95px;"><input id="Quantite<?php echo $i;?>"  type="text" size="7" name="Quantite<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['Quantite'.$i])) {echo $_SESSION['Quantite'.$i];} ?>" ></td>
<!--  -->
<td class="Doc_Tableau" style=" width:119px;"><input id="MontantHT<?php echo $i;?>"  type="text" size="7" name="MontantHT<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['MontantHT'.$i])) {echo $_SESSION['MontantHT'.$i];}?>" ></td>
</tr>
  <?php } ?>
</table>
<table  style="float:right; margin-right:121px; text-align:center" border="0" align="right">
<tr>
<td class="Doc_Tableau" style=" width:119px; text-align:right" >Total HT&nbsp;</td>
<td class="Doc_Tableau" style=" width:119px;"><input type="text" size="7" id="TotalHT" ></td>
</tr>
<tr>
<td class="Doc_Tableau" style=" width:119px; text-align:right" >
Tva <select name="tva" style="font-size:19px;" id="TauxTva" onChange="change_Tva(<?php echo $i;?>)" >
<option>20</option>
<option>10</option>
</select>%&nbsp;
</td>   <td class="Doc_Tableau" style=" width:119px;"><input type="text" size="7" id="MontantTVA" ></td>
</tr>    <tr>
<td class="Doc_Tableau" style=" width:119px; text-align:right" >Montant TTC&nbsp;</td>
<td class="Doc_Tableau" style=" width:119px;"><input type="text" size="7" id="TotalTTC" ></td>
</tr>  </table>
<table id="tableau" style=" float:right; margin-right:121px" border="1"><tr><td>
<h1 style="text-align:center "><input type="submit"></h1>
</tr></td> </table>
</form>
<table id="tableau" style=" float:right; margin-right:121px" border="1"><tr><td>
<form action="" method="post" >Lignes <input type="text" name="Lignes" value="1"><input type="submit"></form>
</td></tr>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Total = 0;
function change_Tva (){ 
document.getElementById('MontantTVA').value = document.getElementById('TotalHT').value * (document.getElementById('TauxTva').value/100);
document.getElementById('TotalTTC').value = +document.getElementById('TotalHT').value + +document.getElementById('MontantTVA').value;
}
function change_valeur(valeur) 
{
document.getElementById('MontantHT'+valeur).value = document.getElementById('Prix'+valeur).value * document.getElementById('Quantite'+valeur).value; 
var nb = '<?php echo $_SESSION['Lignes']; ?>'; 
var ligne = 1;
while(ligne< nb)
	{
	document.getElementById('TotalHT').value = document.getElementById('MontantHT'+ligne).value
	ligne++;
	} 
alert('nb'+nb+'a'+ligne+' ligne');
 
document.getElementById('MontantTVA'). value = document.getElementById('TotalHT').value * (document.getElementById('TauxTva').value/100);
document.getElementById('TotalTTC'). value = +document.getElementById('TotalHT').value + +document.getElementById('MontantTVA').value;
 
}

25/07/2014, 06h41
sekaijin

vu que le tableau est généré en php
je ferais tout les calcul en php

A+JYT
25/07/2014, 11h43
feelwatt

Calcls en Php
Bonjour.

Et donc en rechargeant la page à chaque changement de Prix ou Quantité ?
Ca fait un max de $_Session, c'est pas dérangeant ?

Pourquoi cette incrémentation sur une même variable ne fonctionne pas ?
Code:

1 2 3 4 while(ligne< nb - 1){ Total = parseInt(Total) + parseInt(document.getElementById('MontantHT'+ligne).value); ligne++; }
25/07/2014, 12h00
Spartacusply

Si tu recharges la page, il n'y a aucun problème car ton php est de nouveau exécuté.

Pour la boucle, il y a plusieurs pistes (tu peux débugguer avec la console de ton navigateur, accessible depuis la touche F12), l'une étant qu'il te manque des parenthèses :

Code:

while(ligne< (nb - 1))
25/07/2014, 12h13
sekaijin

sorry mais vu qe tu as posté du php et non du html je n'ai pas lu le code
je n'avais pas vu que tu avais de input dans ton tableau.

perso je ferais très simple
un tableau javascript qui contient toutes les données.
lorsque une valeur et modifié dans un input remplacer la valeur dans le tableau javascript
et utiliser le tableau javascript pour faire les calcul.

ainsi pas de recherche continuelles dans le HTML pas de pb de convertions de parce ou quoi que ce soit. on ne met dans le tableau que des numbers et alea jacta est

A+JYT
25/07/2014, 13h10
feelwatt

Déjà merci
pour avoir séparer le html du js dans mon premier message de cette discussion.
(Merci à qui l'a fait, c'est bien mieux comme ça).

Yes, pour les parenthèses, merci.

Pour les arrays JS, j'avais bien pensé que ca peut être une solution, mais je ne maitrise pas.
J'imagine que
- renseigner un array JS
- de données MySQl
- se fait par une une boucle Php.
:calim2:
25/07/2014, 14h14
feelwatt

Je me demandais et tout faire en $_SESSION ?

C'est vrai que je "bosse" avec des GET et des POST , avec des IF ISSET et ca arrête pas de parse error et tout.

Tout en session et en rechargement....

Qu'en pensez-vous ?

:roll:

Array JS, intérressant de combiner Php et JS

Bonjour,

Je me penche sur les Array JS,
J'ai fait tout un bazarre avec des boucles et ca commençais à faire "chauffer" le pross.
quand je suis tombé sur votre post (sekaijin), concernant l'incrustation d'une requête MySQL dans un array, à savoir:

Code:

<?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>;

Je l'applique de cette façon:
Code:

1 2 3 4 5 6 7 <?php $reqtarifs = mysql_query("SELECT * FROM tarifs"); while ($tarifs = mysql_fetch_array($reqtarifs)) { ?> <script type="text/javascript"> <?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>; </script> <?php } ?>
Ensuite sur un onChange, je vais chercher une information dans un des tableaux, (Wood, Fire, Metal, Water, Earth)

Dans ce premier cas, il me renvoie bien la première entrée du tableau:
Un indiquant en 'dur' le nom du tableau
Code:

1 2 3 4 5 6 <script language="javascript"> function change_Designation(){ Recherche = Wood[0]; alert(Recherche); } </script>
Dans ce deuxième cas, il me renvoie la première lettre de La_Designation:
Un indiquant en variable le nom du tableau
Code:

1 2 3 4 5 6 <script language="javascript"> function change_Designation(La_Designation) { Recherche = La_Designation[0]; alert(Recherche); } </script>
Je sens que j'approche, je le sens.
"Je l'Array !"
Auriez-vous une idée de l'erreur ?

Citation:

Envoyé par feelwatt

Bonjour,

Je me penche sur les Array JS,
J'ai fait tout un bazarre avec des boucles et ca commençais à faire "chauffer" le pross.
quand je suis tombé sur votre post (sekaijin), concernant l'incrustation d'une requête MySQL dans un array, à savoir:

Code:

<?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>;

Je ne pense pas avoir écrit cela s'il f'agit du post http://www.developpez.net/forums/d10...cript-methode/
j'ai écrit ceci
Code:

1 2 3 4 5 $scriptData = Array( 'resultCode' => 200, 'message' => "Jusqu'ici tout va bien !", 'user' => get_object_vars($mySqlQueryResult) );
rt
Code:

1 2 3 <script type="text/javascript"> scriptData = <?php echo json_encode($scriptData ); ?>; </script>
Citation:
Envoyé par feelwatt
Je l'applique de cette façon:
Code:

1 2 3 4 5 6 7 <?php $reqtarifs = mysql_query("SELECT * FROM tarifs"); while ($tarifs = mysql_fetch_array($reqtarifs)) { ?> <script type="text/javascript"> <?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>; </script> <?php } ?>
Ensuite sur un onChange, je vais chercher une information dans un des tableaux, (Wood, Fire, Metal, Water, Earth)

Dans ce premier cas, il me renvoie bien la première entrée du tableau:
Un indiquant en 'dur' le nom du tableau
Code:

1 2 3 4 5 6 <script language="javascript"> function change_Designation(){ Recherche = Wood[0]; alert(Recherche); } </script>
Dans ce deuxième cas, il me renvoie la première lettre de La_Designation:
Un indiquant en variable le nom du tableau
Code:

1 2 3 4 5 6 <script language="javascript"> function change_Designation(La_Designation) { Recherche = La_Designation[0]; alert(Recherche); } </script>
Je sens que j'approche, je le sens.
"Je l'Array !"
Auriez-vous une idée de l'erreur ?
je crois qu'il te faut afficher le code source HTML produit et non le PHP pour comprendre.
si La_Designation est une Stringcomme je le crois La_Designation[0]; est le premier caractère de la chaine.

A+JYT

En effet en lisant le code source de la page j’aperçois que les arrays se sont bien construits.
(Ainsi qu'un dernier vide).
Code:

1 2 3 4 5 var Water = new Water("Water","M3","11","Element 5"); var Wood = new Wood("Wood","Ml","21","Element 3"); var Air = new Air("Air","Forfait","1","Element Air"); var Earth = new Earth("Earth","M2","18","Element 2"); var = new ("","","0","");
En effet La_Designation est une variable contenant une string, mais je pensais qu'on pouvait l'utiliser comme le nom d'un Array, non ?
Code:

1 2 3 4 5 6 7 8 function change_Designation(valeur) { var La_Designation = document.getElementById('Designation'+valeur).value; alert(La_Designation); var Recherche = La_Designation[0]; alert(Recherche); }

28/07/2014, 19h52
sekaijin

Un chaine est une chaine donc

Code:

La_Designation[0]

est le premier caractère.

A+JYT
02/08/2014, 07h19
feelwatt
Bonjour,
j'ai médité plusieurs jours sur cette citation.

J'ai fais des tests qui fonctionnent:
Code:

1 2 var monarray = new Array('a11','b13','c21'); alert = (monarray[1]);
Par contre
J'ai tenté dans tous les sens d'extraire une itération de ces array, avec comme nom d'Array une variable,
en vain, la chaîne reste la chaîne...
Auriez-vous un autre indice ?
:calim2:
02/08/2014, 10h43
sekaijin

ne sachant pas ce que contient La_Designation ni ce que tu veux en extraire. je ne vois pas comment on pourrait t'aider

A+JYT

Bonjour,
merci de votre réponse.

Donc,
Je possède des array suivants:
Code:

1 2 3 var Water = new Array('Water','M3','11','Element 5'); var Earth = new Array('Earth','Heure','18','Element 2'); var Air = new Array('Air','Forfait','1','Element Air');
(Ils sont bien dans le code source de la page.)

Grâce à un OnChange sur un select,

Code:

onChange="change_Designation(<?php echo $i;?>)"

je vais sur cette fonction avec la valeur de la ligne du tableau (ok)
Code:

1 2 3 4 5 6 function change_Designation(valeur) { var La_Designation = document.getElementById('Designation'+valeur).value; var Recherche = La_Designation[1]; document.getElementById('Unite'+valeur).value = Recherche; }
Dans cette fonction, je cherche la valeur du select nommé 'Designation' (ok)

Et c'est que je souhaiterais recevoir l'index 1, de l'array correspondant au mot à l'interieur de la variable La_Designation.

J'ai tnté pleins de chose mais il retourne toujours l'index de la string.
Il ne prend pas en compte le fait que ca soit une variable.

04/08/2014, 12h00
feelwatt
J'ai trouvé comment formuler mon questionnement. :D

La question est en fait:

Comment utiliser une variable comme nom d'arrray ?
Code:

1 2 Tableau_a_utiliser = document.getElementById('Titre').value; Le_resultat = Tableau_a_utiliser[1];
04/08/2014, 14h28
NoSmoking
Bonjour,
tout devient effectivement plus clair.
si tu as un contrôle comme ceci par exemple

Code:

<input type="text" value="tableau">

alors tu peux faire
Code:

1 2 3 var tableau = [1,2,3,4,5]; var nom= document.getElementsByTagName('INPUT')[0].value; // pour l'exemple alert( window[nom]);

Ok,
Merci, NoSmoking

J'ai appliqué ta méthode
Et j'ai refais le code avec quelque chose de plus clair
(avec un peu de <br> pour faciliter la manipulation)

En premier:
Les arrays:

Code:

1
2
3
4
5
<script type="text/javascript">
			var TableauA = new Array('A1','A2', 'A3');
			var TableauB = new Array('B1','B2', 'B3');
			var TableauC = new Array('C1','C2', 'C3');
</script>

En second la fonction:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
		function Changement_Tableau(Quel_Tableau)
		{
			document.getElementById('Tableau_choisi').value = Quel_Tableau; 
				// OK, on recoit le nom du tableau choisi
 
			document.getElementById('Case_retour1').value = Quel_Tableau[0];
			document.getElementById('Case_retour2').value = Quel_Tableau[1];
			document.getElementById('Case_retour3').value = Quel_Tableau[2];
		 		// Pour ceux-ci on reçoit les 3 premières lettres du tableau choisi 
                                // > mais pas le contenu de l'array <
 
		 }
</script>

En troisième l'Html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Choisir un tableau: 
<select id="Choix_tableau" onChange="Changement_Tableau(this.value)">
	<option value="TableauA">TableauA</option>
	<option value="TableauB">TableauB</option>
	<option value="TableauC">TableauC</option>
	<option value="Gateau">Gateau</option>
</select>
<br>
 
Le Tableau_choisi est: <input type="text" id="Tableau_choisi">
<br>
 
Case_retour 1: <input type="text" id="Case_retour1"><br>
Case_retour 2: <input type="text" id="Case_retour2"><br>
Case_retour 3: <input type="text" id="Case_retour3"><br>

Une string est une string,
et c'est bien les index du contenu de la string que l'on reçoit.

Mais alors, comment faire pour dire:
Cette string, c'est une variable qui contient un titre d'array.

Ps:
C'est intéressant, de voir que JS prend les string comme des arrays.

Citation:

J'ai appliqué ta méthode

non, "ma" méthode t'aurais fait écrire
Code:

1 2 3 4 5 6 7 8 function Changement_Tableau(Quel_Tableau) { document.getElementById('Tableau_choisi').value = Quel_Tableau; document.getElementById('Case_retour1').value = window[Quel_Tableau][0]; document.getElementById('Case_retour2').value = window[Quel_Tableau][1]; document.getElementById('Case_retour3').value = window[Quel_Tableau][2]; }
il faut bien que tu comprennes que lorsque tu passes une String à ta fonction tu reçois une String qui peut également représenter le nom d'un variable.
Lorsque tu fais afficher( string[x]) tu affiches le x^éme caractère de la string, sur les navigateurs modernes.
Lorsque tu fais afficher( window[string][x]) tu affiches le contenu du x^éme indice de la variable appartenant à window et nommée string et cela à condition que celle ci soit un Array sinon voir ci dessus.

Code:

document.getElementById('Case_retour1').value = window[Quel_Tableau][0][1]; //2émé caractère du contenu à l'indice 0 du tableau

de toute façon pourqui dès le départ la structure n'est pas complète ?
il ne sert à rien de définir 3 variables
Code:

1 2 3 var Water = new Array('Water','M3','11','Element 5'); var Earth = new Array('Earth','Heure','18','Element 2'); var Air = new Array('Air','Forfait','1','Element Air');
1 seule suffit
Code:

1 2 3 4 5 var data = { 'Water': ['Water','M3','11','Element 5'], 'Earth': ['Earth','Heure','18','Element 2'], 'Air': ['Air','Forfait','1','Element Air'] };
du coup on utilise la variable sans se poster de question

Code:

data['Water'][0];

A+JYT

06/08/2014, 13h29
feelwatt

Ok, Super,
Merci sekaijin et NoSmoking.

C'est donc des tableaux à deux dimensions.
Je vais pouvoir faire en sorte de ne pas recharger ma page à chaque changement.
Il est magnifique ce JavaScript.

Aussi, il y a-t-il une limite dans le nombre d'array ?

Bonne journée.

I Gat it !

Ca y est je l'ai eu:
Pour ceux que ca peut interrésser:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php 
$reqtarifs = mysql_query("SELECT * FROM tarifs"); ?>
<script type="text/javascript"> 
data = { 
<?php while ($tarifs = mysql_fetch_array($reqtarifs))
{ ?>
'<?php echo $tarifs['Designation']; ?>': ['<?php echo $tarifs['Designation']; ?>','<?php echo $tarifs['Unite']; ?>','<?php echo $tarifs['Prix']; ?>'],
<?php } ?>};
</script>																		
<script type="text/javascript">
 
function change_Designation(Ligne,Mot) 
{ 
document.getElementById('Quantite'+Ligne).value = Ligne; 
document.getElementById('Unite'+Ligne).value = data[Mot][1];
document.getElementById('Prix'+Ligne).value = data[Mot][2]; 
}
</script>

En fait je fesais la boucle WHILE autour des balises <script></script>

Allez "Résolu"

Merci sekaijin et NoSmoking :roll:

pourquoi faire compliqué ?

Code:

1
2
3
4
5
6
7
8
9
10
<?php 
$reqtarifs = mysql_query("SELECT * FROM tarifs"); ?>
<script type="text/javascript"> 
data = { 
<?php while ($tarifs = mysql_fetch_array($reqtarifs))
{ ?>
'<?php echo $tarifs['Designation']; ?>': ['<?php echo $tarifs['Designation']; ?>','<?php echo $tarifs['Unite']; ?>','<?php echo $tarifs['Prix']; ?>'],
<?php } ?>};
</script>																		
<script type="text/javascript">

préparation des données à transmetre

Code:

1
2
3
4
5
$reqtarifs = mysql_query("SELECT * FROM tarifs"); 
$data = array();
while ($tarifs = mysql_fetch_array($reqtarifs) {
  $data[$tarifs[Designation]] = $tarifs;
}

passage tu tableau data de php à js

Code:

1
2
3
<script type="text/javascript"> 
data = <?php echo json_encode($data); ?>;
</script>

A+JYT