如何将输入文本从数据表插入数据库并乘以2个值，然后将该值传递给Javascript表中的输入框

Question

我在HTML的数据表中有产品列表，其中包括3个输入框和其中的复选框 您可以参考屏幕截图

根据图片，我应该输入价格和数量，自动总计应按

计算

  

价格：12数量：2总计： 24

total应该自动添加，但是在表中的操作方式和那些值至少应该在Json formate中插入到数据库中

喜欢

[{flower_id: 1, flower_price: 12, flower_quantity: 2, total: 24},{flower_id: 2, flower_price: 2, flower_quantity: 20, total: 40},]

这是桌子

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Flower Name</th>
                                                <th>Price</th>
                                                <th>Quantity</th>
                                                <th>Total</th>
                                                <th>#</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            <?php
                                            foreach ($flowers as $value) {
                                                ?>
                                                <tr>
                                                    <td><?= $value->flower_name ?></td>
                                                    <td class="text-right">
                                                        <input type="text" onblur="getValue()" class="form-control" name="flower_price" class="flower_price">
                                                    </td>
                                                    <td class="text-right">
                                                        <input type="text" onblur="getValue()" class="form-control" name="quantity" class="quantity">
                                                    </td>
                                                    <td class="text-right">
                                                        <input type="text" class="form-control" name="total_price" class="total_price">
                                                    </td>
                                                    <td>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" onclick="customerCheckBox()" name="flower_id" value="<?= $value->id ?>">
                                                            </label>
                                                        </div>
                                                    </td>
                                                </tr>
                                            <?php } ?>
                                        </tbody>
                                    </table>

这是Javascript文件

                                                                    function customerCheckBox() {
                                                                        var selected = new Array();
                                                                        $("input:checkbox[name = flower_id]:checked").each(function () {
                                                                            selected.push({flower_id: $(this).val()});
                                                                        });

                                                                        $("input[name=flower_price]").each(function () {
                                                                            if ($(this).val()) {
                                                                                selected.push({flower_price: $(this).val()});
                                                                            }
                                                                        });

                                                                        $("input[name=quantity]").each(function () {
                                                                            if ($(this).val()) {
                                                                                selected.push({quantity: $(this).val()});
                                                                            }
                                                                        });
                                                                        if (selected.length > 0) {
                                                                            document.getElementById("product").value = JSON.stringify(selected);
                                                                        }
                                                                    }

                                                                    function getValue() {
                                                                        var flower = $('input[name=flower_price').val();
                                                                        var qunatity = $('input[name=quantity').val();
                                                                        var result = (flower * qunatity);
                                                                        $('input[name=total_price').val(result);
                                                                    }

如果我单击复选框，则需要这样，以便我可以通过此Json提交表单以将其插入数据库中。

预先感谢

Answer 1

这是解决方案

JavaScript

function customerCheckBox($id) {
 var selected = new Array();
 var flowerPrice = $('#flower_price_' + $id).val();
 var qunatity = $('#quantity_' + $id).val();
 var totalPrice = $('#total_price_' + $id).val();
 var selected = {flower_id: $id, flower_price: flowerPrice, qunatity: qunatity, 
                total_price: totalPrice};

 console.log(selected);
 }
}

function getValue($id) {
var flower = $('#flower_price_' + $id).val();
var quantity = $('#quantity_' + $id).val();
var result = (flower * quantity); 
$('#total_price_' + $id).val(result);

}

和表

<tr>
                                                    <td><?= $value->flower_name ?></td>
                                                    <td class="text-right">
                                                        <input type="text" onblur="getValue('<?= $value->id ?>')" class="form-control" name="flower_price" id="flower_price_<?= $value->id ?>">
                                                    </td>
                                                    <td class="text-right">
                                                        <input type="text" onblur="getValue('<?= $value->id ?>')" class="form-control" name="quantity" id="quantity_<?= $value->id ?>">
                                                    </td>
                                                    <td class="text-right">
                                                        <input type="text" class="form-control" name="total_price" id="total_price_<?= $value->id ?>">
                                                    </td>
                                                    <td>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" onclick="customerCheckBox('<?= $value->id ?>')" name="flower_id" value="<?= $value->id ?>" id="flower_id_<?= $value->id ?>">
                                                            </label>
                                                        </div>
                                                    </td>
                                                </tr>