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

Question

I have list of products in datatables in html included with 3 input box and check box in it you can refer to the screen shot

as per the picture i should enter price and quantity, Automatically total should calculated like

Price: 12 Quantity: 2 Total: 24

total should automatically added but how to do in the table and those values should insert into database at least i need in Json formate

Like

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

here is the table

<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>

here is the Javascript file

                                                                    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);
                                                                    }

i need like this if i click the checkbox, so that i can pass this Json to submit form to insert into database what to do?

Thanks in advance

Answer 1

Here is the solution

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);

}

And Table

<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>