php - 使用购物车中的jquery在相应数量发生变化时自动更新产品价格

Question

我正在尝试像以下站点一样进行开发在此处输入链接描述

在这里，当用户尝试购买很多商品时，他的购物车会显示出来。他可以尝试更改任何商品的数量。当他更改商品的数量时，该商品的相应价格必须自动更改。完成使用jQuery。我将在这里提供我的代码。

 foreach( $_SESSION['r'] as $key=>$ar):

$cnt++;
 ?>   <tr>

        <td align="center"><?php echo $ar['Name']?></td>
        <td align="center"><?php echo $ar['Price']?></td>
       <td align="center"> // Quantity is given as dropdownlist.Each list has seperate select id that is generated dynamivally.such as qty1,qty2,etc.
       <select class="myclass" name="qty" id='qty<?php echo $cnt;?>' onChange="get_price(this.value,<?php echo $ar['Price']?>,<?php echo $cnt;?>)">
       <?php for ($i=1; $i<=100; $i++) {
               $y="";
               if( $i==$_SESSION['r'][$key]['Quantity']){
                $y="selected";
                }
                echo "<option ";
                echo "value=\"$i\" ".$y.">", $i, "</option>\n";


            } ?>

       </select>
       </td>

        <?php $x=$x+$ar['Quantity']; ?>

         <td name="price"><span id="priceDisplay<?php echo $cnt;?>"><?php echo $ar['Total']; ?></span></td>

        <input type='hidden' name='id' id="pid" value='<?php echo $ar['Id']; ?>'>
        <input type='hidden' name='price' id="pprice" value='<?php echo $ar['Price'] ?>' class="input">

下一个代码是我的 jquery 代码

function get_price(val,price,cnt){     
var price1 =  val * price;   
document.write(('<span id="priceDisplay"+cnt></span>\n'));

这里我是在数量变化时计算价格。但我的问题是我不知道如何在相应的列中显示计算出的价格。变量 cnt 是从 php 传递的行 id。请帮我。

<?php
session_start();
include('head.php');
?>
<!DOCTYPE HTML>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
<script>
   function get_price(val,price,cnt)
   {  

     var price1 =  val * price;
     $("#priceDisplay"+cnt).html(price1);


   </script>


  <?php
    if(empty($_SESSION['items'])){ ?>
<center><b><font color="red">There are no products in your cart!!</font>            </b></center>    
  <?php  
    }
   else

    {
     ?>

     <b><center><font color="green"> Your Shopping Cart!!</font></center> </b><br><br>
      <form name="formview" action="ajaxview.php" method="post">
        <?php $count=0; ?>


     <table align="center" width="50%" cellpadding="1px" cellspacing="3px" border="1" bgcolor="lightblue">
        <tr>  
        <th>Item</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Subtotal</th>
         <th>Remove</th>
        </tr> 
   <?php  

foreach( $_SESSION['r'] as $key=>$ar):

$cnt++;
 ?>   <tr>

        <td align="center"><?php echo $ar['Name']?></td>
        <td align="center"><?php echo $ar['Price']?></td>
       <td align="center">
       <select class="myclass" name="qty" id='qty<?php echo $cnt;?>' onChange=get_price(this.value,<?php echo $ar['Price']?>,<?php echo $cnt;?>,) >
       <?php for ($i=1; $i<=100; $i++) {
               $y="";
               if( $i==$_SESSION['r'][$key]['Quantity']){
                $y="selected";
                }
                echo "<option ";
                echo "value=\"$i\" ".$y.">", $i, "</option>\n";


            } ?>

       </select>
       </td>

        <?php $x=$x+$ar['Quantity']; ?>

         <td name="price"><span id="priceDisplay<?php echo $cnt;?>"><?php echo $ar['Total']; ?></span></td>

        <input type='hidden' name='id' id="pid" value='<?php echo $ar['Id']; ?>'>
        <input type='hidden' name='price' id="pprice" value='<?php echo $ar['Price'] ?>' class="input">  
       <td><input type='checkbox' name='remove' value='Remove' onCheck="$(this).closest('tr').remove();"> 


        <?php $tt[]=$ar['Total'];?>
       </tr>
       <?php
     endforeach;
       ?>

    </table>
   </form>
        <!--<table align="right">-->
      <?php foreach($tt as $t)
      {
        $count=$count+$t;
      }

     ?>  
    <br>
    <br>
      <b><center><div class="total">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Total:<span id="tot"><?php echo $count; ?></span></div></center></b>
    <b><div class="cart">Your Cart:<span class="ycart"><?php echo $x; ?></span>       </div></b>

score 0 · Accepted Answer

替换这个：

document.write(('<span id="priceDisplay"+cnt></span>\n'));

有了这个：

document.getElementById("priceDisplay"+cnt).innerHTML=price1;

使用jQuery：

$("#priceDisplay"+cnt).html(price1);

score 0 · Accepted Answer

你想要它在 jquery 中。采用

$("#id").html("hello World");

将 id 更改为您要使用的 id。还有文字

score 0 · Accepted Answer

希望能帮助到你，

  function get_price(val,price,cnt){
    var price1 =  val * price;  
    document.getElementById('priceDisplay'+cnt).innerHTML =price1;
    //$('#priceDisplay'+cnt).html(price1); //jquery     

  }

使用 Jquery 来实现这一点，

              $(document).ready(function() {    

         $(".myclass").change(function(){
                 var identifier = $(this).attr('id');
                 var Qty = $(this).val();
                 var Price = $("#price_"+identifier).val();//price value
                 var Total =  Qty * Price;                   
                 $("#priceDisplay_"+identifier).html(Total);                 
                 GrandTotal();
               });
             GrandTotal();       

            });


         function GrandTotal(){
            var GrandTotal=0;
             $(".myclass").each(function(){
                 var identifier = $(this).attr('id');
                 var Qty = $(this).val();
                 var Price = $("#price_"+identifier).val();//price value
                 var Total =  Qty * Price;                   

                 GrandTotal += Total;
                 $("#priceDisplay_"+identifier).html(Total);    
               });

          $("#GrandTotal").html(GrandTotal);

        }

         function RemoveCart(ob){

             var IdForRemove =ob.value;

             $.ajax({
                 type: "POST",
                 url: "RemoveCart.php",
                 dataType:'json',
                 data: { id: IdForRemove}
                 })
                 .done(function( data ) {
                     $("#GrandTotal").html(data.Grandtotal);                    

                     $("#"+IdForRemove).remove();

                 });

             return false;
         }


            <table>
                <?php
                  $cnt =0;
                  //  session_start();
                  //   $_SESSION['r'] = array('0'=>array('Name'=>'test 1','Price'=>'50.5','Id'=>'1', 'Quantity'=>'3'), '1'=>array('Name'=>'test 2','Price'=>'100','Id'=>'2', 'Quantity'=>'4'), '2'=>array('Name'=>'test 3','Price'=>'150','Id'=>'3', 'Quantity'=>'5'));
                 $CartR = $_SESSION['r'];


               foreach($CartR as $key=>$ar):

               $Identifier = 'qty_'.$cnt;
            ?>  
                <tr id="<?php echo $ar['Id']; ?>">

                     <td align="center"><?php echo $ar['Name']?></td>
                     <td align="center"><?php echo $ar['Price']?></td>
                     <td align="center"> // Quantity is given as dropdownlist.Each list has seperate select id that is generated dynamivally.such as qty1,qty2,etc.
                            <select class="myclass" name="qty" id='<?php echo $Identifier;?>' >
                            <?php for ($i=1; $i<=100; $i++) {
                                    $y="";
                                    if( $i==$ar['Quantity']){
                                        $y='selected="selected"';
                                     }
                                     echo "<option value='".$i."' $y> $i</option>\n";


                                 } ?>

                            </select>
                        </td>

                         <?php $x=$x+$ar['Quantity']; ?>

                         <td name="price"><span id="priceDisplay_<?php echo $Identifier;?>"><?php echo $ar['Total']; ?></span></td>

                        <input type='hidden' name='id' id="pid_<?php echo $Identifier;?>" value='<?php echo $ar['Id']; ?>'>
                        <input type='hidden' name='price' id="price_<?php echo $Identifier;?>" value='<?php echo $ar['Price'] ?>' class="input">  

                        <td><input type="checkbox" onclick="RemoveCart(this)" value="<?php echo $ar['Id']; ?>"> Remove
             </tr>

              <?php  $cnt++;  endforeach;  ?> 
     </table>

       Grand Total: <div id="GrandTotal"></div>

在该页面中创建新文件“RemoveCart.php”和以下行，

      <?php session_start();
            if(isset($_POST['id'])){

                $toBeRemove =$_POST['id'];
                $CartR =$_SESSION['r'];

                    foreach($CartR as $key=>$Cart){                     

                        if($Cart['Id']==$toBeRemove){                   

                            unset($_SESSION['r'][$key]);

                        }
                    }
                    $CartR = $_SESSION['r'];
                    $Grandtotal =0;
                    foreach($CartR as $key=>$Cart){

                        $Grandtotal += $Cart['Quantity'] * $Cart['Price'];
                    }


                    echo json_encode(array('Grandtotal'=> "$Grandtotal"));
            }


        ?>

php - 使用购物车中的jquery在相应数量发生变化时自动更新产品价格

3 回答 3

Related

Reference