How to save Dynamically Generated table rows to database

debugcn Published at Dev

alpha

This is My HTML Code

<form method="POST" action="backend/backup.php">
<div class="box-body col-sm-12">
    <input type="hidden" name="txtSlNo" id="txtSlNo" value="1">
    <div class="col-sm-2">
        <label for="Date" class="control-label">Date:</label>
        <input type="text" class="text-right" name="date[]" id="date" 
value="<?php  echo date(" Y/M/D ")?>">
    </div>
    <div class="col-sm-1">
        <label for="name" class="control-label">Amount:</label>
        <input type="text" size="7" class="text-right" name="txtAmount[]" 
id="txtAmount" oninput="calculate()" onkeypress="return isNumber(event);">
    </div>
    <div class="col-sm-1">
        <label for="name" class="control-label">Unit:</label>
        <input type="text" size="7" name="txtUnit[]" class="text-right" 
id="txtUnit" oninput="calculate()" value="1" onkeypress="return 
isNumber(event);">
    </div>
    <div class="col-sm-1">
        <label for="name" class="control-label">Total:</label>
        <input type="text" size="7" name="txtTotal[]" class="text-right" 
id="txtTotal" oninput="calculate();" oninput="addTotal();" readonly>
    </div>
    <div class="col-sm-2">
        <br>
        <!--  <button name="add" id="add" class="btn btn-primary" 
hidden="hidden">Add</button>  -->
    </div>
    <div class="col-sm-2">
        <input type="button" value="add" name="tableAdd" id="tableAdd" 
class="btn btn-primary add add1">
    </div>
</div>
<div class="col-xs-12">
    <table id="tabledata" name="tabledata">
        <thead>
            <tr>
                <th style="width: 50px; text-align: center !important;" 
id="select">select</th>
                <th style="width: 50px; text-align: center 
!important;">Sl.No</th>
                <th style="width: 125px; text-align: center 
!important;">Date</th>
                <th style="width: 175px; text-align: center 
!important;">Service</th>
                <th style="width: 80px; text-align: center 
!important;">Charge</th>
                <th style="width: 80px;">Amount</th>
                <th style="width: 80px;">Unit</th>
                <th style="width: 80px;">Total</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<button type="button" id="delete-row" class="delete-row">Delete Row</button>
<button class="print" onclick="myFunction()">Print this page</button>
<br>
<label class="GrandTotalLabel" id="GrandTotalLabel">GRAND TOTAL</label>
<input type="text" name="txtGrandTotal" value="00.00" class="txtGrandTotal" 
oninput="addTotal();" id="txtGrandTotal" readonly/>

</form>

This is My PHP code

<?php
$servername = "localhost";
$username = "1234";
$password = "";
$dbname = "tad";
$conn = new mysqli($servername, $username, $password, $dbname);
if(isset($_POST["save"]))
{
$numberOfRows = count($_POST['date']); // get the number of rows

for ($i = 0; $i < $numberOfRows; $i++) {
    $date = $_POST["date"][$i];
    $amount = $_POST["txtAmount"][$i];
    $unit = $_POST["txtUnit"][$i];
    $total = $_POST["txtTotal"][$i];
    $sql = "INSERT INTO backup_master (backup_date, backup_amount, 
backup_unit, backup_total) VALUES ('$date', '$amount', '$unit', '$total')";
    $result  = mysqli_query($conn, $sql);
}
}
?>

This is MY JAVASCRIPT CODE

<script type="text/javascript">
var lclCount=0;
$("#tableAdd").click(function(){

   var sl_no = ($('#tabledata tr').length) - 1;

    lclCount++;
    sl_no++;

    var date = $("#date").val();
    var amount = $("#txtAmount").val();
    var unit = $("#txtUnit").val();
    var total = $("#txtTotal").val();
    var markup = "<tr><td><input type='checkbox'
name='record' id='"+ lclCount +"'></td><td name='slno' class='slno' id 
='slno-"+sl_no+"'>" 
     + sl_no + "</td><td>"
     + date + "</td><td>"
     + amount + "</td><td>"
     + unit + "</td><td>"
     + parseFloat(total).toFixed(2) + "</td></tr>";
    $("#tabledata").append(markup);
    addTotal();

    refreshAdd();



});

Here I want to save whatever is generated from dynamically created table data to the database. I tried a lot but unable to do so. Am getting an error saying undefined index date amount etc. Here I want to generate id for every automatically generated table row but unable to figure out how to do so.

Is there any other solution for this ?

Thank in Advance.

GYaN

Okay....

In my code I'm created a div with class data in which I put four inputs date,amount,unit and total.

I add plus and minus buttons in last for add/remove row.

by clicking plus button clone of previous row appear in last

On submit data of all input will be send to the submit URL.

<?php
    $servername = "localhost";
    $username = "1234";
    $password = "";
    $dbname = "tad";
    $conn = new mysqli($servername, $username, $password, $dbname);
    if(isset($_POST["save"])){
        $value = '';
        for ($i=0;$i<count($_POST['date']);$i++) {
            $value .= '("'.$_POST["date"][$i].'","'.$_POST["amount"][$i].'","'.$_POST["unit"][$i].'","'.$_POST["total"][$i].'"),';
        }
        $value = rtrim($value,",");
        $sql = "INSERT INTO backup_master (backup_date, backup_amount, backup_unit, backup_total) VALUES ".$value;
        $result  = mysqli_query($conn, $sql);
    }
 echo '
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body><br />
    <div class="container">
        <h2>Vertical (basic) form</h2>
        <form action="/action_page.php">
            <div class="row data" divid="1">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">Date</span>
                        <input type="text" class="form-control date" value="'.date('Y/M/d').'" id="date-1" placeholder="Enter date" name="date[0]" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">Amount</span>
                        <input type="text" class="form-control amount" data-id="1" value="0" id="amount-1" placeholder="Enter Amount" name="amount[0]" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">Unit</span>
                        <input type="text" class="form-control unit" data-id="1" id="unit-1" value="0" placeholder="Enter Unit" name="unit[0]" />
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <span class="input-group-addon">Total</span>
                        <input type="text" class="form-control total" id="total-1" readonly="readonly" name="total[0]" />
                    </div>
                </div>
                <div class="col-md-1">
                    <button class="btn btn-success btn-block plus" type="button" id="p-1">+</button>
                    <button class="btn btn-danger btn-block minus hide" type="button" id="m-1">-</button>
                </div>
            </div>
            <div class="row"><div class="col-md-3">&nbsp;</div></div>
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">Grand Total</span>
                        <input type="text" class="form-control" value="0" id="g-total" readonly="readonly" name="g_total" />
                    </div>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-default" name="save">Submit</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>';
?>

<script type="text/javascript">
    $(document).on('change','.unit,.amount',function(e) {
        id = parseInt($(this).attr("id").replace("unit-", "").replace("amount-",""));

        get_total(id);

    });

    function get_total(id){
        unit_d = parseInt($('#unit-'+id).val());
        amount = parseInt($('#amount-'+id).val());
        total = Math.ceil(amount*unit_d);
        $('#total-'+id).val(total);
        var g_total = 0;
        jQuery('.total').each(function(){
            g_total = g_total+parseInt($(this).val());
        });
        $('#g-total').val(g_total);
    }


/****************************JS for add new row****************************/

    $(document).on('click','.plus',function(e) {
        var thisRow = $('.data').last(".data"); 
        var newid = parseInt(thisRow.attr('divid'))+1;
        var cid = parseInt(thisRow.attr('divid'));
        var date = $('#date-'+cid).val();
        var amount = $('#amount-'+cid).val();
        var n_unit = $('#unit-'+cid).val();
        var total = $('#total-'+cid).val();
        if(date=="") $('#date-'+cid).addClass('error'); else $('#date-'+cid).removeClass('error');
        if(amount=="") $('#amount-'+cid).addClass('error'); else $('#amount-'+cid).removeClass('error');
        if(n_unit=="") $('#unit-'+cid).addClass('error'); else $('#unit-'+cid).removeClass('error');
        if(total=="") $('#total-'+cid).addClass('error'); else $('#total-'+cid).removeClass('error');
        if((date!="")&&(amount!="")&&(n_unit!="")&&(total!="")){
            $('#date-'+cid+',#amount-'+cid+',#unit-'+cid).attr('readonly','readonly');
            newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
            find('.date').each(function(){
                $(this).attr('id', 'date-'+newid);
                $(this).attr('name','date['+(newid-1)+']');
                $(this).val($('#date-'+cid).val());
                $(this).removeAttr('readonly');
            }).end().find('.amount').each(function(){
                $(this).attr('id', 'amount-'+newid);
                $(this).attr('name','amount['+(newid-1)+']');
                $(this).attr('data-id',newid);
                $(this).val(0);
                $(this).removeAttr('readonly');
            }).end().find('.unit').each(function(){
                $(this).attr('id', 'unit-'+newid);
                $(this).attr('name','unit['+(newid-1)+']');
                $(this).attr('data-id',newid);
                $(this).val(0);
                $(this).removeAttr('readonly');
            }).end().find('.total').each(function(){
                $(this).attr('id', 'total-'+newid);
                $(this).attr('name','total['+(newid-1)+']');
                $(this).val(0);
            }).end().find('.plus').each(function(){
                $(this).attr('id', 'p-'+newid);
                $(this).attr('data-id', newid);
            }).end().find('.minus').each(function(){
                $(this).attr('id', 'm-'+newid);
            }).end();
            thisRow.next('.data').attr("divid",newid).addClass('child');
            $('.minus').removeClass('hide');
            $('.plus').addClass('hide');
            $('#m-'+newid).addClass('hide');
            $('#p-'+newid).removeClass('hide');
        }
    });
/****************************JS for add new row****************************/

/****************************JS for delete row****************************/

$('.minus').click(function(e) {
    $(this).closest('.data').remove();
});

/****************************JS for delete row****************************/    </script>

Collected from the Internet

Please contact [email protected] to delete if infringement.