Pass all HTML table values to PHP to store them in database using Javascript

Question

I have an HTML table which I populate from database using a button. I want to get all the values from the table and send them to a php file to store each row in the database using Javascript when a button is clicked. I thought of using a SESSION variable instead of javascript in order to do this but I am not sure this is the best way to do it and I have no idea where to start.

I hope someone can help me, thanks.

this is the table code if it helps:

<table id="dgvDetalleFactura" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" data-toggle="bootgrid">
                        <thead>
                            <tr>
                                <th data-column-id="IDProducto" data-type="numeric" data-identifier="true">Código</th><!--Editable-->
                                <th data-column-id="NombreProducto">Producto</th>
                                <th data-column-id="Cantidad">Cantidad</th> <!--Editable-->
                                <th data-column-id="Precio">Precio</th><!--Editable-->
                                <th data-column-id="UnidadMedida">Medida</th>
                                <th data-column-id="Impuesto">Imp.</th>
                                <th data-column-id="Descuento">Desc.</th> <!--Editable-->
                                <th data-column-id="Total">Total</th>
                                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Opciones</th> <!--Columna de acciones de borrado-->
                            </tr>
                        </thead>
                    </table>

I'm confused. Why are you taking data out of a database to stick into an html table and then taking that same data and sticking it back into a database again? — dmikester1, Feb 27 '19 at 20:02
JavaScript runs on the clients computer and can't access the servers database — Andreas, Feb 27 '19 at 20:02
@dmikester1 is not the same data, I am working on an invoice system and I trying to store the invoice product list — Errol Chaves Moya, Feb 27 '19 at 20:05
@Andreas I know what you mean but I am just looking for a way to pass the data to PHP using javascript — Errol Chaves Moya, Feb 27 '19 at 20:06
@Errol, you can convert to a json object. -- https://stackoverflow.com/questions/12602443/converting-table-data-into-json — blupointmedia, Feb 27 '19 at 20:08
Use something like Axios or jQuery to post the data? https://codingthesmartway.com/getting-started-with-axios/ — dmikester1, Feb 27 '19 at 20:09
Or for jQuery: https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — dmikester1, Feb 27 '19 at 20:13

score 1 · Answer 1 · answered Feb 27 '19 at 20:19

The best approach if you are allowing the user to update the table and wanting to save the data on-the-fly is to set up an api on the server side that receives the data via POST either as multiple parameters or or a single JSON object and then passes that data to the server via an Ajax call. JQuery has a good component for making Ajax calls easy.

This is all very straight-forward and fundamental functioning and things you should learn to do in any case but your learning curve is likely to be pretty steep. I won't go into details on all of the steps (it would take pages) but here are the broad strokes and techniques required. Let's assume you will use JSON

Create a JS on your client side to read the data from your table via the DOM (Jquery/JS/DOM)
Encapsulate that data into a single codable object for transfer to the server (JSON)
Implement a server side script that can receive that object, decode it and save it to your new database (PHP/POST/GET/JSON/MYSQL)
Implement JS on the client side to interface with that new PHP script and deliver the JSON data from the client to the server (Ajax/Jquery/POST/GET)
As an extra, have the PHP API return a code of "success" or "failure" upon receipt of the data and display that on the client side (PHP/Jquery/DOM)

Those are the "broad strokes" of what you'll need to research.

score 0 · Accepted Answer · answered Feb 28 '19 at 20:42

this is the code that ended up working for me:

    <script type="text/javascript">

function GrabarFila()
{
    var dgvDetalleFactura = document.getElementById('dgvDetalleFactura');

    var TableData = new Array();

    $('#dgvDetalleFactura tr').each(function(row, tr){
        TableData[row]={
            "IDProducto" : $(tr).find('td:eq(0)').text()
            , "NombreProducto" :$(tr).find('td:eq(1)').text()
            , "Cantidad" : $(tr).find('td:eq(2)').text()
            , "PrecioVentaSinIV" : $(tr).find('td:eq(3)').text()
            , "UnidadMedida" : $(tr).find('td:eq(4)').text()
            , "ImpuestoVentas" : $(tr).find('td:eq(5)').text()
            , "Descuento" : $(tr).find('td:eq(6)').text()
            , "TotalNeto" : $(tr).find('td:eq(15)').text()
        }
    }); 
    TableData.shift();

    $.ajax({
            url: 'Logica/Factura.php',
            type: 'post',
            data: 
            {
               DetalleFactura:TableData,
            },
            dataType: 'json',
            success:function(response){

                var len = response.length;

                if(len > 0){

                alert("Exito");

                }

            }
        });

        return false;
}   

</script>

Pass all HTML table values to PHP to store them in database using Javascript

2 Answers2