Calcul du montant total d'un panier

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

je suis en train de développer un site d'achat en ligne pour les grandes surfaces.

Mon problème c'est que je veux calculer le prix total d'un produit. exemple un produit coute 4$ si il souhaite achete ce produit x 2 alors ça sera 4x2=8$.

voici une petite image de mon panier qui vous aidera à mieux comprendre :

Pièce jointe 525301

je veux que dans la colonne "prix total du produit" il affiche le prix total en fonction du prix de ce produit qui se trouve dans la colonne "prix" et de la quantité choisi qui se trouve dans la colonne "quantité".

Voici mon

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
<!--================Cart Area =================-->
  <section id="s1">
      <h1>Voici votre panier actuel :</h1>
 
      <table class="table table-striped table-bordered" style="margin-top: 20px;" id="table1">
  <thead>
    <tr class="table-active">
      <th scope="col">Image</th>
 
      <th scope="col">Nom</th>
      <th scope="col">Prix</th>
 
      <th scope="col">Marque</th>
      <th scope="col">Quantité</th>
      <th scope="col">Prix total du produit</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
 
 
     <%while(re.next()){%> 
     <tr>
 
            <th scope="row"> <img src="<%=re.getObject(8)%>" style="width: 100px; height: 150px;"></th>
 
            <td><%=re.getObject(3)%></td>
            <td id="prix">><%=re.getObject(4)%> Dhs</td>
 
            <td><%=re.getObject(6)%></td>
            <td><input type="number" name="quantiteproduit" id="quantiteproduit" class="form-control form-control-md" style="width: 70px;" id="quantiteproduit" value="1"/></td>
            <td><label id="labeltotal"></label></td>
            <td>
                <a href="#" class="btn btn-danger btn-lg"><i class="fas fa-trash-alt"></i></a>
            </td>
     </tr>
 
 
      <%}%>
 
 
  </tbody>
 
</table>
 
 
 
 
  </section>
  <!--================End Cart Area =================-->

et voici mon code jquery :

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
<script>
            $(document).ready(function(){
                var total;
                var prix=$(document).getElementById('prix');
                var quantité=$(document).getElementById('quantiteproduit');
                var calcule=0;
                console.log("ready");
                $('#button_panier').click(function(){
                    console.log("click");
                    for(int i=0;i<table1.length;i++){
                    calcule=prix*quantité;
                    total=calcule;
                    console.log("le total est :"+total);
                }
                  $(document).getElementById('labeltotal').value=total;  
                });
 
 
 
            });
 
 
 
 
        </script>

Le problème c'est que ça marche pas.

Merci d'avance pour votre aide !

19/12/2019, 09h10
SpaceFrog

Je ne saurais trop que te déconseiller fortement de calculer ton prix avec Javascript.
Il faut la faire coté serveur au moyen d'appels ajax à un webSevice par exemple.
Au moins tu es sûr que le prix calculé est exact, au lieu de te reposer sur des données calculées coté client .
19/12/2019, 09h20
Invité
Bonjour,
Code:

1 2 3 4 <%while(re.next()){%> ....... <td><input type="number" name="quantiteproduit" id="quantiteproduit" ....... <td><label id="labeltotal" .........
1- Non, non et non.
On l'a déjà dit 1000 fois : un attribut id DOIT ÊTRE UNIQUE.
Or là, tu es dans une BOUCLE.

-> il faut utiliser des CLASSES.

2- Là encore, cette problématique a été traitée 1000 fois.
Tu n'es pas le 1er à faire un PANIER !

-> Fais une recherche :recherch:

3- Quant à ton code "jQuery", il est faux d'un bout à l'autre : syntaxe, logique,...

En faisant ça, ça marche.

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
<table id='table2'>
    <tr>
 
           <th scope="row"> <img src="" style="width: 100px; height: 150px;"></th>
 
           <td id='prix'> 100 </td>
           <td class="quantite"><input type="number"   class="form-control" style="width: 70px;"  value="2"/> 
            </td><td><label id="labeltotal"></label></td>
 
           <td>
               <a href="#" class="btn btn-danger btn-lg"><i class="fas fa-trash-alt"></i></a>
           </td>
    </tr>
</table>
 
<button id='button_panier'>clicquer ici</button>
 
 
 
 <script>
            $(document).ready(function(){
                alert('pres');
                                alert($('#prix').html());
                                alert($('.form-control').val());
                                var prix = $('#prix').html();
                                var quantite = $('.form-control').val();
                alert('prix = '+$('#prix').html());
                alert('total = '+ prix*quantite)
            });
 
 
 
 
        </script>
 </body>
 </html>