Btukfyl

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

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>