使用 ajax jquery php 和 mysql 制作账单

Posted 2023-05-09

【中文标题】使用 ajax jquery php 和 mysql 制作账单

【英文标题】：Make a Bill using ajax jquery php and mysql

【发布时间】：2021-05-07 07:01:15

【问题描述】：

我正在做帐单，当我添加多个产品时，所有产品的价格都是一样的。 正因为如此，我什至无法得到所有这些的总和但我做不到，但我正在为此苦苦挣扎。请检查我的代码并告诉我答案。

bill.php

<?php
include 'head.php';
?>

<div>
    <table class="table table-sm table-bordered table-striped">
        <thead>
            <tr>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total Amount</th>
                <th><input class="addrow" type="button" name="" value="Add"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><select class="form-control">
                    <option value="">--select--</option>
                </select></td>
                <td style="width: 100px"><input class="form-control quantity" type="number" name=""></td>
                <td style="width: 100px"><input class="form-control price" value="" disabled type="text" name=""></td>
                <td style="width: 200px"><input class="form-control amount" value="" disabled type="text" name=""></td>

                <td><input class="deleterow" type="button" name="" value="Delete"></td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function()
        $.ajax(
            url:"webservice.php",
            type:"post",
            dataType:'json',
            success:function(data)
                $('.table tbody select').append(data);
            ,
            error:function()
                console.log("ERROR IN AJAX");
            
        );
    );

    $(document).on('change','select',function()
        let product_value = $(this).val();
        $.ajax(
            url:"productprice.php",
            type:"post",
            data:product_value,
            dataType:'json',
            success:function(data)
                $('.price').val(data);
            ,
            error:function()
                console.log("ERROR IN AJAX");
            
        );
    );

    $(document).on('click','.addrow',function()
        $('.table tbody tr:first-child').clone().appendTo('.table tbody');
    );
    $(document).on('click','.deleterow',function()
        if($('.table tbody').children().length == 1)
            alert("minimum 1 Product required");
        else
            $(this).closest('tr').remove();  
             
    );

    $(document).on('change','.quantity',function()
        let quantity = $('.quantity').val();
        let price = $('.price').val();

        $('.amount').val(quantity * price);
    );
</script>

webservices.php

<?php

include 'connection.php';

$sql = "SELECT * FROM `products`";

$result = mysqli_query($db,$sql);

// $output ="";

while ($row = $result->fetch_assoc()) 
    $output[] = "<option value=$row[product_id]>$row[product_name]</option>";


echo json_encode($output);

productprice.php

<?php

include 'connection.php';

$sql = "SELECT * FROM `products`";

$result = mysqli_query($db,$sql);

// $output ="";

while ($row = $result->fetch_assoc()) 
    $output[] = "<option value=$row[product_id]>$row[product_name]</option>";


echo json_encode($output);

【参考方案1】：

在您当前的代码中，每当您的选择发生变化时，您都将使用类 price 定位所有元素。相反，您可以在这里使用$(this).closest('tr').find('.price') closest() 方法将获得最接近发生变化的tr 然后使用.find() 方法获取所需的价格输入。数量变化事件也是如此。

演示代码：

//just for demo...
var data = "<option value=1>A</option><option value=2>B</option><option value=3>C</option>"
$('.table tbody select').append(data);

$(document).on('change', 'select', function() 
  let product_value = $(this).val();
  //declare this outside ajax call..
  var selector = $(this).closest('tr').find('.price')
  /*$.ajax(
    url: "productprice.php",
    type: "post",
    data: 
      product_value
    ,
    dataType: 'json',
    success: function(data) */
  selector.val(34); //just for demo.. use .val(data)
  /*,
    error: function() 
      console.log("ERROR IN AJAX");
    
  );*/
);

$(document).on('click', '.addrow', function() 
  var cloned = $('.table tbody tr:first-child').clone();
  $(cloned).find("select").val(""); //empty select
  $(cloned).find("input:not(:last)").val(""); //empty input values
  $(cloned).appendTo('.table tbody');
);
$(document).on('click', '.deleterow', function() 
  if ($('.table tbody').children().length == 1) 
    alert("minimum 1 Product required");
   else 
    $(this).closest('tr').remove();
  
);

$(document).on('change', '.quantity', function() 
  let quantity = $(this).val(); //get qty value where change occur
  let price = $(this).closest('tr').find('.price').val(); //get price only from required row..

  //add result only on same row..
  $(this).closest('tr').find('.amount').val(quantity * price);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm table-bordered table-striped">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total Amount</th>
      <th><input class="addrow" type="button" name="" value="Add"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="form-control">
          <option value="">--select--</option>
        </select>
      </td>
      <td style="width: 100px"><input class="form-control quantity" type="number" name=""></td>
      <td style="width: 100px"><input class="form-control price" value="" disabled type="text" name=""></td>
      <td style="width: 200px"><input class="form-control amount" value="" disabled type="text" name=""></td>

      <td><input class="deleterow" type="button" name="" value="Delete"></td>
    </tr>
  </tbody>
</table>