Calcul automatique et boucle while

**angejudicael** · 18/06/2013, 00h40

Bonjour à tous.

Je suis stagiaire et l'on m'a demandé de mettre en place un petit système de commande en ligne. Le principe est qu'après sélection de l'article, un tableau reçoit les différents éléments. Dans ce tableau , il y a une zone de sélection pour le choix de la quantité.
Je souhaiterais qu'un calcul automatique affiche la quantité total à chaque fois que l'on sélectionne une quantité. Toutes mes tentatives restent vaines. J'ai vraiment vraiment besoin d'aide.

JAVASCRIPT

Code :

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

1
2
3
4
5
6
7
function cal(nbligne)
{
var genre = document.getElementById("genre"+nbligne).options[document.getElementById("genre"+nbligne).selectedIndex].value;
 
var prix  = document.getElementById("prix"+nbligne).value;					
					document.getElementById("resultat"+nbligne).value = prix * genre;
}

CODE PHP

Code php :

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
<table style="border: 1px solid rgb(204, 204, 204); background-color: rgb(255, 255, 255); padding:7px; font-size:12px;" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="900">
          <tbody>
 
            <tr>
              <td height="40" align="center" valign="middle" colspan="5">COMMANDE DU JOUR</td>
            </tr>
 
            <tr>
              <td width="311" height="30" align="center" valign="middle">&nbsp;</td>
 
              <td width="248" height="30" align="left" valign="middle"><strong>Prix unitaire</strong></td>
 
              <td width="150" height="30" align="left" valign="middle"><strong>Quantité</strong></td>
              <td width="189" height="30" align="left" valign="middle"><strong>&nbsp;</strong></td>
              <td width="189" height="30" align="left" valign="middle"><strong>&nbsp;</strong></td>
            </tr>
 
			<?php
				$total = $count = '0';
				$z = '1';
				$u = '1';
				while($grid = mysql_fetch_array($requete1))
				{ 	
					$color = ++$z % 2 ? '#FFFFFF':'#EEEEEE';
					$req11 = mysql_query("SELECT * FROM produits WHERE idproduits = '".$grid['idproduits']."'");
					$data = mysql_fetch_array($req11);
			?>
 
            <tr bgcolor="<?php echo $color; ?>">
              <td width="311" height="30" align="left" valign="middle" style="padding-left:30px;">
              <img src="<?php echo $data['images'] ?>" height="45px" width="60px" border="0" style="border:#CCC solid 1px; margin:5px; padding:7px; float:left; background-color:#FFFFFF;" />
              <div style="font-size:11px; padding-bottom:1px; padding-left:7px; padding-top:5px;"><?php echo ucfirst($data['code']); ?></div>
              <div style="font-size:11px; padding-bottom:1px; padding-left:7px; padding-top:5px;"><?php echo ucfirst($data['libelle']); ?></div>
              </td>
 
              <td width="248" height="30" align="left" valign="middle"><?php echo $data['prix'].' '.'FCfa'; ?></td>
              <input name="prix<?php echo $u; ?>" type="hidden" value="<?php echo $data['prix']; ?>" id="prix<?php echo $u; ?>" onChange="calcul(<?php echo $u; ?>)">
              <td width="150" height="30" align="left" valign="middle">
			  <select name="genre<?php echo $u; ?>" id="genre<?php echo $u; ?>" onChange="calcul(<?php echo $u; ?>)">             
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option> 
              <option value="5">5</option> 
              <option value="6">6</option> 
              <option value="7">7</option> 
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>               
              </select>
              </td>
              <td height="30" align="left" valign="middle">
             <input id="resultat<?php echo $u; ?>" value="" type="text" readonly />  FCfa
              </td>
              <td height="30" valign="middle" style="padding-left:15px;"><a href="?menu=fiche&action=sup&id=<?php echo $grid['idcommande']; ?>" onClick="return(confirm('Etes vous sur(e) de vouloir supprimer ?'));"><img src="img/cross-16.png" border="0" title="Supprimer cette ligne"></a></td>
            </tr>
            <?php				
				$z = $z++;
				$u = $u+1;
				}
			?>
 
        </table>

**Bovino** · 18/06/2013, 08h08

Il te suffit de faire une boucle sur tous les champs prix et d'additionner au fur et à mesure... Quel est le problème ?

**angejudicael** · 18/06/2013, 09h27

Coucou Bovino, merci d'avoir prix la peine de me répondre. En fait, je souhaiterais qu'après la sélection de la quantité (qui est dans un select évidemment), le calcul se fasse automatiquement sans rafraichissement.

**Bovino** · 18/06/2013, 09h32

merci d'avoir prix la peine de me répondre

Ma peine n'a pas de prix !

Encore une fois, il n'y a pas de grande difficulté...
Sur l'événement onchange des select, tu ajustes le prix correspondant à la nouvelle quantité (ça, tu le fais déjà apparemment) puis tu boucles sur tous les champs prix pour additionner les valeurs. A la fin de la boucle, tu affectes le résultat au total.

**angejudicael** · 18/06/2013, 10h28

Ben je n'affiche même pas les les valeurs correspondantes à chaque ligne. Je lis, relis le code et je ne vois pourtant pas d'erreur. Gr

**angejudicael** · 18/06/2013, 10h38

Sur l'image, la partie marquée en rouge devrait m'afficher ce calcul automatique mais là rien.

**Bovino** · 18/06/2013, 10h49

Probablement... mais comme on a pas ton code, on peut pas vraiment t'aider concrètement...

D'autre part, je rappelle que le code JavaScript s'applique à un document HTML, le code PHP est sans intérêt et complique la compréhension. Voir : Important : Les règles incontournables d'utilisation de ce forum.

**angejudicael** · 18/06/2013, 11h00

Envoyé par Bovino

Probablement... mais comme on a pas ton code, on peut pas vraiment t'aider concrètement...

D'autre part, je rappelle que le code JavaScript s'applique à un document HTML, le code PHP est sans intérêt et complique la compréhension. Voir : Important : Les règles incontournables d'utilisation de ce forum.

Je pense avoir compris les fondamentaux du JavaScript. Là j'y suis plongé les 2 pieds dans la marmite et je fais avec ma petite compréhension de la chose.

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
 
<script language="text/javascript">			  
				var total = 0;
				var i = 0;
				function cal(nbligne)
				{
					var genre = document.getElementById("genre"+nbligne).options[document.getElementById("genre"+nbligne).selectedIndex].value;
					//var genre = document.getElementById("genre"+nbligne).selectedIndex;
					var prix  = document.getElementById("prix"+nbligne).value;
 
					document.getElementById("resultat"+nbligne).value = prix * genre;
					resultat = document.getElementById("resultat"+nbligne).value;
 
						total = total + resultat;
						document.getElementById("totalvalid").value = total;
				}
 
			  </script>

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
$requete1 = mysql_query("SELECT * FROM commande WHERE idusers = '".$_SESSION['idusers']."' AND dat = '".date('Y-m-d')."' AND code = '' ORDER BY idcommande DESC");				
		?>
        <form action="?menu=fiche&action=validusers" method="post">
        <table style="border: 1px solid rgb(204, 204, 204); background-color: rgb(255, 255, 255); padding:7px; font-size:12px;" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="900">
          <tbody>
 
            <tr>
              <td height="40" align="center" valign="middle" colspan="5">COMMANDE DU JOUR</td>
            </tr>
 
            <tr>
              <td width="311" height="30" align="center" valign="middle">&nbsp;</td>
 
              <td width="248" height="30" align="left" valign="middle"><strong>Prix unitaire</strong></td>
 
              <td width="150" height="30" align="left" valign="middle"><strong>Quantité</strong></td>
              <td width="189" height="30" align="left" valign="middle"><strong>&nbsp;</strong></td>
              <td width="189" height="30" align="left" valign="middle"><strong>&nbsp;</strong></td>
            </tr>
 
			<?php
                                $total = $count = '0';
                                $z = '1';
                                $u = '0';
                                while($grid = mysql_fetch_array($requete1))
                                {       
                                        $color = ++$z % 2 ? '#FFFFFF':'#EEEEEE';
                                        $req11 = mysql_query("SELECT * FROM produits WHERE idproduits = '".$grid['idproduits']."'");
                                        $data = mysql_fetch_array($req11);
                        ?>
 
            <tr bgcolor="<?php echo $color; ?>">
              <td width="311" height="30" align="left" valign="middle" style="padding-left:30px;">
              <img src="<?php echo $data['images'] ?>" height="45px" width="60px" border="0" style="border:#CCC solid 1px; margin:5px; padding:7px; float:left; background-color:#FFFFFF;" />
              <div style="font-size:11px; padding-bottom:1px; padding-left:7px; padding-top:5px;"><?php echo ucfirst($data['code']); ?></div>
              <div style="font-size:11px; padding-bottom:1px; padding-left:7px; padding-top:5px;"><?php echo ucfirst($data['libelle']); ?></div>
              </td>
 
              <td width="248" height="30" align="left" valign="middle"><?php echo $data['prix'].' '.'FCfa'; ?></td>
              <input name="prix<?php echo $u; ?>" type="hidden" value="<?php echo $data['prix']; ?>" id="prix<?php echo $u; ?>" onChange="cal(<?php echo $u; ?>)">
              <td width="150" height="30" align="left" valign="middle">
			  <select name="genre<?php echo $u; ?>" id="genre<?php echo $u; ?>" onChange="cal(<?php echo $u; ?>)">             
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option> 
              <option value="5">5</option> 
              <option value="6">6</option> 
              <option value="7">7</option> 
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>               
              </select>
              </td>
              <td height="30" align="left" valign="middle">
              <input id="resultat<?php echo $u; ?>" value="" type="text" readonly />  FCfa
              </td>
              <td height="30" valign="middle" style="padding-left:15px;"><a href="?menu=fiche&action=sup&id=<?php echo $grid['idcommande']; ?>" onClick="return(confirm('Etes vous sur(e) de vouloir supprimer ?'));"><img src="img/cross-16.png" border="0" title="Supprimer cette ligne"></a></td>
            </tr>
            <?php                           
                                $z = $z++;
                                $u = $u+1;
                                }
                        ?>
 
        </table>
        <br>
        <table cellpadding="0" cellspacing="0" width="900">
        	<tr>
              <td width="898" height="30" align="center" valign="middle">&nbsp;</td>
 
              <td width="898" height="30" align="center" valign="middle">&nbsp;</td>
 
              <td width="898" height="30" align="center" valign="middle">&nbsp;</td>
              <td width="898" height="30" align="justify" valign="middle" style="border: 1px solid rgb(204, 204, 204); background-color: rgb(255, 255, 255); padding:7px; font-size:14px; padding:15px;" >
              <div style="padding-bottom:6px; font-family:tahoma;">Frais de transport : 0</div>
              <div style="padding-bottom:20px; font-family:tahoma;">TVA (%) : 0</div>
              <div style="padding-bottom:10px; font-family:tahoma;">
			  Mode de paiement :&nbsp; <select name="typemonnaie">             
              <option value="espece">espece &agrave; la r&eacute;ception</option>             
              </select>
</div>
			  <div style="padding-bottom:6px; font-family:tahoma;">Montant total : <?php echo $count.' F Cfa'; ?></div>
 
              </td>
            </tr>
 
            <tr>
              <td width="898" height="30" align="center" valign="middle">&nbsp;</td>
 
              <td width="898" height="30" align="center" valign="middle">&nbsp;</td>
 
              <td width="898" height="30" align="center" valign="middle">&nbsp;</td>
              <td width="898" height="30" align="justify" valign="middle" style="font-size:14px; padding-top:10px;" >
 
              <input type="submit" value="Valider ma commande" style="background-color:#b5cb20; font-family:tahoma; height:30px; color:#FFFFFF;">
              </td>
            </tr>
 
 
            <tr>
              <td width="898" height="30" align="center" valign="middle" colspan="4">&nbsp;</td>
              </td>
            </tr>
        </table>
        </form>

Calcul automatique et boucle while

JavaScript

Discussions similaires

Partager

Partager