实时求和每次更改以及如何使用 ajax php mysql 处理它

Posted 2023-03-05

【中文标题】实时求和每次更改以及如何使用 ajax php mysql 处理它

【英文标题】：Real time sum every on change and how to process it with ajax php mysql

【发布时间】：2022-01-11 09:10:18

【问题描述】：

首先，我希望你们能读到最后。我真的需要帮助解决我的问题，因为我一直在寻找它，但仍然不知道。

根据该图片，add-order.php 文件中的第一个“产品和总产品”元素是静态的。第二个“产品和总产品”元素是通过单击加号按钮创建的。代码如下：

let counter = 1;
$("#add-button").click(function ()     
    event.preventDefault(); 
    counter++;
    let newSubjectField =  `<div class="row" id="products$counter">
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="product_id$counter">Product</label>
                                        <select class="form-control" name="product_id[]" id="product_id$counter">
                                            <option value="">Pilih</option>
                                            <?php
                                                $sql = mysqli_query($con, "SELECT * FROM product ORDER BY id ASC");
                                                while($data = mysqli_fetch_array($sql))
                                            ?>
                                            <option value="<?php echo $data['id']; ?>"><?php echo $data['name']; ?></option>
                                            <?php  ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="total_product$counter">Total Product</label>
                                        <input type="number" class="form-control total_product$counter" name="total_product[]" id="total_product$counter" placeholder="Jumlah" />
                                    </div>
                                </div>
                            </div>`;
    $('#form-products').append(newSubjectField);
);

所以，我的问题是我无法显示那里所有产品的总价格。在那张图片中，总价仅显示第一个产品的价格 * 数量（例如：15000 * 3 = 45000）。我想当我输入第二个产品的数量时，总价格是实时变化的，显示所有产品的总和（例如：(1st Product's price * its quantity) + 2nd Product's price * its quantity）。

无论如何，它并不总是有两个产品，如该图片中的示例。它可能比它更多，这取决于点击了多少加号按钮。所以，我希望每次选择下一个产品 + 它的数量时总价格总是改变它的值。

这是我到目前为止所做的：

$('.total_product').on('keyup', function()
    var data_total = $('#product_id').val(); 
    var total_product = $('.total_product').val();
    console.log(total_product);
    $.ajax(
        type: 'get',
        url: 'ajax-total.php',
        data: 
            'data_total': data_total,
            'total_product': total_product,
        ,
        success: function(data)
            var json = data,        
            obj = JSON.parse(json);
            console.log(data);
            $('#total').val(obj.total);        
        
    );
);

<?php
    include '../connection.php';

    $data_total = $_GET['data_total'];
    $total_product = $_GET['total_product'];
    $query = mysqli_query($connection, "SELECT sale_price FROM product WHERE id='$data_total'");
    $row = mysqli_fetch_assoc($query);

    $total = (int)$row['sale_price'] * (int)$total_product;

    $data = array(
            'total'   =>   $total);
            
     echo json_encode($data);
?>

我希望你们能帮助我解决这个问题。非常感谢您。

【问题讨论】：

尝试在产品下拉更改更改时显示产品。

您尝试过什么来解决问题？这是 JS 问题（浏览器没有按预期执行）还是 PHP 问题（服务器未按预期处理请求）？此外，来自最后一个 sn-p 的 SELECT 查询极易受到 SQL 注入攻击 - 请查看准备好的语句以避免被黑客入侵

@NicoHaase 我知道这很容易受到攻击，但这只是一种做法。我还是编程新手。我认为我的问题。首先，如何在 Total Product 的每一次变化中进行实时求和，然后将数据传递给 PHP 并将其发送回 JS 中调用，这样，Total Price 将显示所选产品的所有价格的总和

【参考方案1】：

如果有多个框，您可以尝试在选择框更改时显示价格。

就像创建一种计算定价的方法一样，我假设您的产品表中有价格列.. ---

-- while add the add button try this code ---
let counter = 1;
$("#add-button").click(function ()     
    event.preventDefault(); 
    counter++;
    let newSubjectField =  `<div class="row" id="products$counter">
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="product_id$counter">Product</label>
                                        <select class="form-control product-name" name="product_id[]" id="product_id$counter" onChange="calPrice()">
                                            <option value="">Pilih</option>
                                            <?php
                                                $sql = mysqli_query($con, "SELECT * FROM product ORDER BY id ASC");
                                                while($data = mysqli_fetch_array($sql))
                                            ?>
                                            <option value="<?php echo $data['id']; ?>" data-price="<?php echo $data['price']; ?>"><?php echo $data['name']; ?></option>
                                            <?php  ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-md-6 col-12 mb-1">
                                    <div class="form-group">
                                        <label for="total_product$counter">Total Product</label>
                                        <input type="number" class="form-control total_product$counter" name="total_product[]" id="total_product$counter" placeholder="Jumlah" />
                                    </div>
                                </div>
                            </div>`;
    $('#form-products').append(newSubjectField);
);

然后用js代码获取价格---

function calPrice()
  var totalPrice = 0;
$(".product-name").each(function(i,v)
   totalPrice += $(v).find('option:selected').data('price');
);

//then show the price in the box --
$("#total_price").val(totalPrice);

让我们看看它是否适合你....

【讨论】：

返回消息Uncaught ReferenceError: callPrice is not defined at htmlSelectElement.onchange

在克隆之前编写函数调用并使用window.calPrice = function() ...