How to get data in an Editable Table to send via AJAX?

Question

I have a modal and there is an Dynamic Editable table. I am seeking a way of getting the data of the editable table to the JS variables. Then I can pass these data to the controller via AJAX. I tried so many codes. but I couldn't find the suitable way. How should I get values to variables ?

Form blade

                <div class="col-lg-12 mt-4 mb-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center customizable-table text-center" id="opening_invoice_table">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">Date</th>
                                    <th scope="col">Detail</th>
                                    <th scope="col">Invoice No</th>
                                    <th scope="col">Amount</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody id="opening_invoice_table_body">
                                <tr>
                                    <td><input type="date" class="form-control form-control-alternative date" name="opening_invoice[1][date]"></td>
                                    <td><input type="text" class="form-control form-control-alternative detail" name="opening_invoice[1][detail]"></td>
                                    <td><input type="text" class="form-control form-control-alternative invoice-no" name="opening_invoice[1][invoice_no]"></td>
                                    <td><input type="number" class="form-control form-control-alternative amount" name="opening_invoice[1][amount]" min="0" step="any" placeholder="0.00"></td>
                                    <td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>
                                </tr>
                            </tbody>

                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th><label>Total Amount</label></th>
                                    <th><input type="number" class="form-control form-control-alternative amount-calculate" name="total_amount" id="total_amount" placeholder="0.00" readonly></th>
                                    <th></th>
                                </tr>
                            </tfoot>

                        </table>

                        <a class="btn btn-info pull-right add-record mt-2" data-added="0" title="Add Row" id="add_row"><i class="fa fa-plus"></i> Add Row</a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="col-lg-12 text-right">
                    <button type="submit" class="btn btn-success"><i class="fas fa-download"></i> Save</button>
                    <button type="reset" class="btn btn-success"><i class="fas fa-eraser"></i> Clear</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-window-close"></i> Close</button>
                </div>
            </div>
        </form>

Script

<script>
    $(document).ready(function(){
        var counter = 2;
        //add rows
        $("#add_row").on("click", function () {
            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><input type="date" class="form-control form-control-alternative date" name="opening_invoice[' + counter + '][date]"></td>';
            cols += '<td><input type="text" class="form-control form-control-alternative detail" name="opening_invoice[' + counter + '][detail]"></td>';
            cols += '<td><input type="text" class="form-control form-control-alternative invoice-no" name="opening_invoice[' + counter + '][invoice_no]"></td>';
            cols += '<td><input type="number" class="form-control form-control-alternative amount" name="opening_invoice[' + counter + '][amount]" min="0" step="any" placeholder="0.00"></td>';
            cols += '<td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>';

            newRow.append(cols);
            $("#opening_invoice_table").append(newRow);
            counter++;
        });

        //delete rows
        $("#opening_invoice_table").on("click", "#delete_row", function (event) {
            $(this).closest("tr").remove();       
            counter -= 1
            counter++
        });

    });

         //calculate total amount
         $("#opening_invoice_table").on('input', '.amount', function () {
        var calculated_total_sum = 0;

        $("#opening_invoice_table .amount").each(function () {
            var get_textbox_value = $(this).val();
            if ($.isNumeric(get_textbox_value)) {
                calculated_total_sum += parseFloat(get_textbox_value);
            }                  
        });

        $("#total_amount").val(calculated_total_sum);
   });


   function newOpeningInvoice() {
    var e = window.event || arguments.callee.caller.arguments[0];

    e.preventDefault();

    //Here I want to get table data. Below variables used for just testing purpose.
    //var date = +$('.amount').val();
    // var detail = $("input[class='detail']").val();
    // var invoice_no = +$('.detail-no').val();
    // var amount = +$('.amount').val();

    // var date = "2020-03-27";
    // var detail ="value";

    //alert(amount);


    $.ajax({
        url: "opening_invoice/create",
        type: "POST",
        data: {'date': date, 'detail': detail, 'invoice_no': invoice_no, 'amount': amount, '_token':'{{csrf_token()}}' },
        success: function (data) {
            $('#add_opening_invoice_modal').modal('hide');

            swal({
                title: "Success!",
                text: "Opening Invoice Saved Successfully!",
                type: "success",
                showConfirmButton: false,
                timer: 1500,
            });
        }
    });

    return false;
}

</script>

Answer 1

I could find the answer and it is working fine. serialize() is used to send the array of dynamic table data via AJAX to the controller.

//add rows
            $('#add_row').on('click', function () {
                var tr = '<tr>'+
                '<td><input type="date" class="form-control form-control-alternative date" name="date[]"></td>'+
                '<td><input type="text" class="form-control form-control-alternative detail" name="detail[]"></td>'+
                '<td><input type="text" class="form-control form-control-alternative invoice-no" name="invoice_no[]"></td>'+
                '<td><input type="number" class="form-control form-control-alternative amount" name="amount[]" min="0" step="any" placeholder="0.00"></td>'+
                '<td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>'+
                '<tr>';
                $('tbody').append(tr);
            });


            //delete rows
            $('#opening_invoice_table').on('click', '#delete_row', function (event) {
                    var last=$('tbody tr').length;
                    if(last==1){
                    //do nothing
                    } else {
                    $(this).parent().parent().remove();
                    }
               });


            //calculate total amount
            $("#opening_invoice_table").on('input', '.amount', function () {
            var calculated_total_sum = 0;
     
            $("#opening_invoice_table .amount").each(function () {
                var get_textbox_value = $(this).val();
                if ($.isNumeric(get_textbox_value)) {
                calculated_total_sum += parseFloat(get_textbox_value);
                }                  
            });
            $("#total_amount").val(calculated_total_sum);
       });
  

    });


    //submit opening invoice data
        $('#opening_invoice_form').on('submit', function(event){
            event.preventDefault();
            $.ajax({
                url:"opening_invoice/create",
                method:'post',
                data:$(this).serialize(),
                dataType:'json',
                success:function(data)
                {
                    $('#add_opening_invoice_modal').modal('hide');
                    swal({
                        title: "Success!",
                        text: "Opening Invoice Saved Successfully!",
                        type: "success",
                        showConfirmButton: false,
                        timer: 1500,
                    });
                }
            })
    });

<form id="opening_invoice_form">
            @csrf
                <div class="modal-body">
                
                    <div class="col-lg-12 mt-4 mb-3">
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center customizable-table text-center" id="opening_invoice_table">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col">Date</th>
                                        <th scope="col">Detail</th>
                                        <th scope="col">Invoice No</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="date" class="form-control form-control-alternative date" name="date[]"></td>
                                        <td><input type="text" class="form-control form-control-alternative detail" name="detail[]"></td>
                                        <td><input type="text" class="form-control form-control-alternative invoice-no" name="invoice_no[]"></td>
                                        <td><input type="number" class="form-control form-control-alternative amount" name="amount[]" min="0" step="any" placeholder="0.00"></td>
                                        <td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>
                                    </tr>
                                </tbody>

                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th><label>Total Amount</label></th>
                                        <th><input type="number" class="form-control form-control-alternative amount-calculate" name="total_amount" id="total_amount" placeholder="0.00" readonly></th>
                                        <th></th>
                                    </tr>
                                </tfoot>

                            </table>

                            <a class="btn btn-info pull-right add-record mt-2" data-added="0" title="Add Row" id="add_row"><i class="fa fa-plus"></i> Add Row</a>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <div class="col-lg-12 text-right">
                        <button type="submit" class="btn btn-success" id="sad"><i class="fas fa-download"></i> Save</button>
                        <button type="reset" class="btn btn-success"><i class="fas fa-eraser"></i> Clear</button>
                        <button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-window-close"></i> Close</button>
                    </div>
                </div>
            </form>

Answer 2

Okey well I think this code might help you a lot.

I recommend you to create the "dynamic" parts in the javascript itself. This way you can use the data easier in my opinion. Here is how:

Javascript:

//To use them globally in the script. NOTE: Needs to be above the onload, otherwise javascript does not know the elements yet.
let trElement;
let tdElement;
let inputElement;

window.onload = onload();

function onload() {
    //Create elements
    trElement = document.createElement("tr");
    tdElement = document.createElement("td");
    inputElement = document.createElement("input");

    //Set elements parameters
    inputElement.type = "date";
    inputElement.classList.add("form-control", "form-control-alternative", "date");
    inputElement.name = "opening_invoice[1][date]";

    //Appends
    tdElement.append(inputElement);
    trElement.append(tdElement);
    document.getElementById("opening_invoice_table_body").appendChild(trElement);



    //I do not have jQuery installed but you should create them like this:
    // let inputElement = $('<input/>', {
    //     'class': 'form-control form-control-alternative date'
    //     'name': ...
    // });
}


function createPartOfATable() {
    console.log(inputElement.value);
}

HTML:

<div class="col-lg-12 mt-4 mb-3">
    <div class="table-responsive">
        <table class="table table-hover align-items-center customizable-table text-center" id="opening_invoice_table">
            <thead class="thead-light">
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Detail</th>
                    <th scope="col">Invoice No</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            //This part has changed. Removed the HTML inside this tbody since I create it in javascript.
            <tbody id="opening_invoice_table_body"></tbody>

            <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th><label>Total Amount</label></th>
                    <th><input type="number" class="form-control form-control-alternative amount-calculate" name="total_amount" id="total_amount" placeholder="0.00" readonly></th>
                    <th></th>
                </tr>
            </tfoot>

        </table>

        <a class="btn btn-info pull-right add-record mt-2" data-added="0" title="Add Row" id="add_row" onclick="createPartOfATable();"><i class="fa fa-plus"></i> Add Row</a>
    </div>
</div>

Keep in mind that I created it in pure Javascript since I did not have jQuery installed at the moment. But I wrote some examples on how you should do it. Also jQuery documentation gives you a lot of info to do it with jQuery.