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);