How to save data from html table to database in Laravel

Question

I enter data from text field to html table rows by using JavaScript. Then I need to save them in a mysql table one by one. so I want to know how to save them to database. I put the coding below.

function addRow() {
  var table = document.getElementById("tbody");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var items = document.getElementById("item").value;
  var suppliers = document.getElementById("supplier").value;
  var quantities = document.getElementById("quantity").value;
  var grnprices = document.getElementById("grnprice").value;



  if (items == "", suppliers == "", quantities == "", grnprices == "") {
    alert("Please fill the Required Field");
  } else {

    var values = parseInt(document.getElementById('rawno').value, 10);
    values = isNaN(values) ? 0 : values;
    values++;
    document.getElementById('rawno').value = values;

    var total = quantities * grnprices;

    row.insertCell(0).innerHTML = values;
    row.insertCell(1).innerHTML = items;
    row.insertCell(2).innerHTML = suppliers;
    row.insertCell(3).innerHTML = quantities;
    row.insertCell(4).innerHTML = "Rs. " + grnprices;
    row.insertCell(5).innerHTML = "Rs. " + total;
    row.insertCell(6).innerHTML = '<button type ="button" class="btn btn-danger" onClick="Javacsript:deleteRow(this)"> <i class="fa fa-trash-o"></i></button>';
  }
}

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col" width="200">Item</th>
      <th scope="col" width="200">Supplier</th>
      <th scope="col" width="200">Quantity</th>
      <th scope="col" width="200">GRN Price</th>
      <th scope="col" width="50"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" min="0" class="form-control" name="item" id="item">
      </td>
      <td>
        <input type="number" min="0" class="form-control" name="supplier" id="supplier">
      </td>
      <td>
        <input type="number" min="1" class="form-control" name="quantity" id="quantity">
      </td>
      <td>
        <input type="number" min="0" class="form-control" name="grnprice" id="grnprice">
      </td>
      <td>
        <input type="button" class="btn btn-info" id="add" value="Add" onclick="Javascript:addRow()">
      </td>
      <td>
        <input type="hidden" name="rawno" id="rawno">
      </td>
    </tr>
  </tbody>
</table>
</div>



<table class="table" id="myTableData">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Supplier</th>
      <th>Quantity</th>
      <th>GRN Price</th>
      <th>Total</th>
      <th></th>
    </tr>
  </thead>

  <tbody id="tbody">
    <tr></tr>
  </tbody>
</table>

<button type="button" class="btn btn-success" onclick="grnConfirmation()">Save</button>

Can anyone show an example.

Answer 1

First of all, you need to group all the input data which you want to save in database to a form which pointed to the controller method. Then the controller will do all the job.

Assuming you write the front-end in blade file : create.blade.php

<form method="POST" action="ItemInfoController@store">

<input type="text" min="0" class="form-control" name="item" id="item">
<input type="number" min="0" class="form-control" name="supplier" id="supplier">
<input type="number" min="1" class="form-control" name="quantity" id="quantity">
<input type="number" min="0" class="form-control" name="grnprice" id="grnprice">
<input type="submit" value="submit">

</form>

In ItemInfoController.php :

public function store(Request $request) {

// This will add the data from input to the database.
// You can change the query builder as you need.
DB::table('item')->insert(['item' => $request->item, 
                           'supplier' => $request->supplier, 
                           'quantity' => $request->quantity]);

}

If you want to use Eloquent you can just change the DB query with the model you use.

Example : ItemInfo::create($request);