javascript - 如何从数据库中获取动态行输入字段中所选产品的价格？

Question

我正在表单中设置一个动态行。需要从选择下拉列表中获取产品的价格。

产品下拉列表中已经填充了来自数据库的值。

<?php 
function fill_unit_select_box($con){
    $output ='';
    $query = "SELECT * FROM pricelist";
    $result = $con->query($query);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
        $output .= '<option value="'.$row["product"].'">'.$row["product"].'</option>';
        }
        return $output;
    }
}
?>

<div class="form-body pal">
    <div class="row">
        <div class="col-md-12 col-md-offset-10">
            <div class="form-group">
                <button type="button" class="btn btn-info add-new-product_record_details"><i class="fa fa-plus"></i> Add Product</button>
            </div>
        </div>
    </div>
</div>
<div class="form-body pal">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover add_row" id="product_record_details">
                        <thead>
                            <tr>
                                <th class="success text-center">Product<span class='require'>*</span></th>
                                <th class="success text-center">Price<span class='require'>*</span></th>
                                <th class="success text-center">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-body pal">
    <div class="col-md-10 col-md-offset-10">
        <div class="form-group">
            <input type="hidden" id="main_product_name"/>
            <input type="hidden" id="main_row_product_count"/>
            <input type="hidden" name="submit_product_creation" class="btn btn-primary">
            <button type="submit" name="product_creation" id="product_creation" class="btn btn-primary"><i class="fa fa-arrow-right"></i> Save</button>
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
    // Append table with add row form on add new button click
        $(".add-new-product_record_details").click(function(){
            //$(this).attr("disabled", "disabled");
            var index = $("#product_record_details tbody tr:last-child").index();
            // Random value has generated to set the unique id value of the table
            var randaom_val = Math.floor(Math.random() * 100000000)
            var row_index = index+randaom_val;
            var row = '<tr>' +
                '<td><select name="product_id[]"  id="product_id'+row_index+'" onchange="fetch_product_price(this.id,'+row_index+')" class="select_format form-control"><option value="">Select</option><?php echo fill_unit_select_box($con); ?></select></td>'+
                '<td><input type="number" name="alead_price[]" id="alead_price'+row_index+'" placeholder="Price"  class="form-control"/></td>' +
        '<td><input type="number" name="aquantity[]" id="aquantity'+row_index+'" placeholder="Price"  class="form-control"/></td>' +
                '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' +
                '</tr>';
            $("#product_record_details").append(row);
            $(".select_format").select2({
                width: 'resolve'
            });
            // $("#main_spare_record_details tbody tr").eq(index + 1).find(".add, .edit").toggle();
            $("#product_record_details tbody tr").eq(index + 1).find("").toggle();
        });
        // Delete row on delete button click
        $(document).on("click", ".delete", function() {
            $(this).parents("tr").remove();
            //$(".add-new").removeAttr("disabled");
        });
    });
</script>

<script>
    function fetch_product_price(product_id,row_count) {
        var test = $('.select_format').val();
        // alert(test);
        $('#main_product_name').val($('#'+spare_id).val());
        $('#main_row_product_count').val(row_count);
    }
</script>

我需要什么

1. 所以在更改产品时，它应该从数据库中获取产品的价格。

2. 输入数量后自动乘以价格 例如:产品的获取价格为“2000”，我们输入的数量值为“2”，因此输出应显示为“4000”，该值将在价格列中输入

谢谢

Answer 1

好的，这是我的意思的一个例子，当你填充你的产品时<select>将价格包含在 data-price 中属性

$output = "";
while($row = $result->fetch_assoc()) {
$output .= '<option value="'. $row["id"] .'" data-price = "' .$row["price"] . '">'. 
         htmlspecialchars($row["product"]).'</option>';
}
return $output;

现在在客户端，在select的事件监听器中获取商品的价格

$("select#products").change(function (){
  var price = $(this).find("option:selected").data("price");
  var quantity = $("input#quantity").val();
  var total = price * quantity;
  alert("total is " + total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="quantity" placeholder="quantity">
<select id="products">
  <option data-price="100">product1</option>
  <option data-price="200">product2</option>
  <option data-price="300">product3</option>
  <option data-price="400">product4</option>
</select>

注意事项:

如果您想根据此价格执行任何操作，请确保在服务器上验证价格，因为在将价格注入(inject) HTML 后价格可能会发生变化。 事实上，无论如何您都应该这样做，因为一般情况下客户永远不会被信任。

例如，您将根据客户提交的价格执行一项操作(销售或购买产品)

$price = $_POST['price'];
$productId = $_POST['productId'];
//don't take that price as guaranteed, any one can send any data to your server
// so you need to check if this price is really the price of this product
$query = "select price from product where product_id = ?"
$stmt = $con->prepare($query);
$stmt->bind_param("i", $productId);
$stmt->execute();
// now if the REAL price you just selected from the DB is the same as
//$_POST['price'] you proceed, if not , you abort.