Discussion :

[toztoztoze]

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 :




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

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
<!--================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 :

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

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

[Invité]

Bonjour,

Code :

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

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


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

[Philcmoi]

En faisant ça, ça marche.

Code HTML :

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