将表信息传递给php并将其上传到数据库

Question

Hey I have this table inside a form

<form  method="post">
            <table class="table table-bordered table-hover" id="factura">
              <thead>
                <tr>
                  <th>Descripción</th>
                  <th class="text-center" style="width: 100px;">Cantidad</th>
                  <th class="text-right" style="width: 120px;">Precio Unitario</th>
                  <th class="text-right" style="width: 120px;">Total</th>
                </tr>
              </thead>
              <tbody>


              </tbody>
            </table>
              <input class="btn btn-sm btn-primary pull-right" type="submit" id="save" name="saveInvoice" disabled="true" value="Guardar">
            </form>

I'm adding items to this table via Javascript this way.

  var titulo = document.getElementById("newItemTitle").value;
  var descripcion = document.getElementById("newItemDescription").value;
  var cantidad = document.getElementById("newItemQuantity").value;
  var precio = document.getElementById("newItemPrice").value;

  var totalItem = precio * cantidad;

  valorTotal += totalItem;

  var precioFix = precio * 1;


  var table = document.getElementById("factura");
  var row = table.insertRow(1);
  var cell2 = row.insertCell(0);
  cell2.innerHTML = '<p class="font-w600 push-10">' + titulo +'</p><div class="text-muted" >' + descripcion + '</div>';
  var cell3 = row.insertCell(1);
  cell3.className = "text-center";
  cell3.innerHTML = '<span class="badge badge-primary">'+ cantidad +'</span>';
  var cell4 = row.insertCell(2);
  cell4.className = "text-right";

  cell4.innerHTML = '$' + formatMoney(precioFix, '') + '';
  var cell5 = row.insertCell(3);
  cell5.className = "text-right";
  cell5.innerHTML = '$' + formatMoney(totalItem, '') + '';

Now I want to upload all this info in the database, I'm trying doing something like this where I pass the table info to a post and the I use javascript to loop into every row and adds it to the database. But it's not working. Can someone help me please?

<?php
if($_POST['saveInvoice']) {

  $table = $_POST['factura'];

  ?>
  <script>
  var table = <?php echo($table) ?>
  var rowLength = table.rows.length;

  for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  console.log(row);

  }
  </script>
  <?php
}

?>

Answer 1

You can use jquery ajax

Update your html code like this and add jquery ajax function as below:

Html Code:

<form  method="post" onsubmit="return sendTable()" id="tableForm">
    <table class="table table-bordered table-hover" id="factura">
      <thead>
        <tr>
          <th>Descripción</th>
          <th class="text-center" style="width: 100px;">Cantidad</th>
          <th class="text-right" style="width: 120px;">Precio Unitario</th>
          <th class="text-right" style="width: 120px;">Total</th>
        </tr>
      </thead>
      <tbody>


      </tbody>
    </table>
    <input class="btn btn-sm btn-primary pull-right" type="submit" id="save" name="saveInvoice" disabled="true" value="Guardar">
</form>

Ajax Code:

var sendTable = function() {
    $.ajax({
        url : "SERVER_FILE_PATH.php",
        data : {table: $('#tableForm').html()},
        type : "POST",
        dataType : "html",
        success : function(){

        }
    })
    return false;
}

Add your server file path for url in ajax function and echo $_POST['table'] on your server to get the html, Also make sure to add jquery library on your page if you have not loaded yet.