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.
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);
Related
My problem is how to use date picker in dynamic rows of the column.
I have used date picker in input text field,but it appears only in first row of the date column.
By selecting the date the date is not selected.
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Bank Name</th>
<th>Chq No</th>
<th>Chq Date</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr >
<td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
<td>
<input style="width:100px" type="text" id="Product_Code" class="form-control input-xs Product_Code "name="name[]"></td>
<td ><input style="width:100px" type="text" id="Product_Name" class="form-control input-xs" name = "no[]" > </td>
<td><input type="text" class="form-control input-xs datepicker-dates" placeholder="Pick a date…" id="TDate" name="TDate" value="<?php echo date('d/m/Y') ?>"</td>
<td><input style="width:80px" type="text" id="Rate" class="form-control input-xs" value="" name="rate[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" id="addMore3" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>
</tr>
</tbody>
</table>
This is table code...........
<script>
$(function(){
$('#addMore3').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove3', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
This is javascript code for creating dynamic rows and columns.
try this:
<input type="text" name="TDate" class="form-control" value="" id="datepicker">
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker();
});</script>
I have added new rows dynamically with jQuery and applied a function but I want to apply this differently for each row. right now its applying commonly for every rows.
HTML code:
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text"></td>
<td>
<select class="form-control" id="bank_ac_no">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Jquery Codes:
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text"></td><td><select class="form-control" id="bank_ac_no"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
if ($(this).val() == 'Vault'){
$('#bank_title, #bank_ac_no').hide();
}
else if ($(this).val() == 'Bank'){
$("tr.bank_deposit").each(function (){
$('#bank_title, #bank_ac_no').show();
});
}
});
When I am changing the deposit method I want to hide/show the two fields in each row but its applying in every row.
see the demo with codes:
https://jsfiddle.net/wasid/33qp9ewn/3/
You can add an attribute (like row-id) for inputs to determine which row has been processed. I modified HTML and Javascript codes. Also, you can take a look modifed codes as Fiddle Demo
HTML
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method" row-id="0">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text" row-id="0"></td>
<td>
<select class="form-control" id="bank_ac_no" row-id="0">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Javascript;
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method" row-id="'+i+'"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text" row-id="'+i+'"></td><td><select class="form-control" id="bank_ac_no" row-id="'+i+'"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="'+i+'"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
var rowId = $(this).attr("row-id");
if ($(this).val() == 'Vault'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").hide();
}
else if ($(this).val() == 'Bank'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").show();
}
});
My problem is more than what my Question title says actually. I have a table in which I can enter values per row and add/delete new rows.
HTML
<div ng-app="ArrayApp">
<div ng-controller="arrayController">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Item No</th>
<th>Product</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Line Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lineItem in lineItems">
<td><input type="checkbox" ng-model="lineItem.selected"/></td>
<td>
<select class="form-control" ng-model="lineItem.item" ng-options="item as item.itemCode for item in items" name="ItemCode" style="width: 100%;">
<option value="0">Select Item</option>
</select>
</td>
<td><input type="text" class="form-control" ng-model="lineItem.item.itemName" required /></td>
<td><input type="number" class="form-control" ng-model="lineItem.quantity" required /></td>
<td><input type="number" class="form-control" ng-model="lineItem.item.unitPrice" required /></td>
<td><span ng-model="lineItem.lineTotal">{{getLineTotal(lineItem)}}</span></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!lineItems.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
</div>
</div>
the script below holds the function to add new rows, delete rows etc.
Angular
$scope.lineItems = [];
$scope.addNew = function (lineItem) {
$scope.lineItems.push({
'item.itemName': '',
'quantity': 1,
'item.unitPrice': ''
});
//$scope.getTotal();
};
$scope.getTotal = function () {
var total = 0;
for (var i = 0; i < $scope.lineItems.length; i++) {
var lineItem = $scope.lineItems[i];
total += (lineItem.quantity * lineItem['item.unitPrice']);
vm.salesInvoice.totalAmount = total;
}
return total;
}
$scope.getLineTotal = function (lineItem) {
var total = 0;
if (!lineItem['item.unitPrice'])
return total;
var total = lineItem.quantity * lineItem['item.unitPrice'];
return total;
}
Now what I am trying to achieve here is this;
I am fetching data from database into vm.items from server and pulling the data into a dropdownlist inside ng-repeat. I want that when I select an item from the dropdown, a corresponding item value will display on the controls of ng-model (lineItem.item.itemName) and lineItem.item.unitPrice inside the table row. This works pretty well with the code displayed here. But the problem here is the displayed values for lineItem.item.itemName and lineItem.item.unitPrice are not captured against their keys in the $scope.lineItems array object. (the values are empty when I debug) To the best of my knowledge I am not seeing anything wrong here. Please I need help.
See Fiddle to throw more light on the question. Please help create a sample JSON array for vm.items to see how it works clearly.
I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!
I have this html
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
html code inside tbody tag is generated by javascript, after generate the code I want to fill the value inside #categories[], #description[] ids
this my javascript code to fill the value
//button simpan item
$('#bSimpanItem').click(function () {
var addnum = $('input#iduser').val();
var addposinfo = $('input#idposinfo').val();
if (addposinfo == '0') {
messageAlert('[ ERROR ]<br>You must completely fill position info field.', 'error');
} else {
var lastrow = ( $('#lastrow').val() ) ? parseInt($('#lastrow').val()) : 1;
var row = parseInt($('#comboqty').val());
var category = $('#combocategory1').val() +'-'+ $('#combocategory2').val();
var description = $('#borrowdesc').val();
addNewRow(row);
console.log(' last row ' + lastrow);
console.log(' total row ' + row);
console.log(' category '+category);
console.log(' description '+description);
for (var i = 1 ; i <= row; i++) {
console.log("index " + i);
$('input#idposinfo').val('');
//fill value "111" and "222" inside <input id="categories[1]"> and <input id="description[1]">
$("input#categories["+lastrow+"]").val("111");
$("input#description["+lastrow+"]").val("222");
lastrow++;
document.getElementById('lastrow').value = lastrow;
console.log("success run bSimpan inside for");
}
console.log("success run bSimpan outside for");
resetForm('formBorrowItem');
$('#formBorrowItem').hide();
//return false;
}
});
but nothing was shown inside the input value
[xxxx] is an attribute selector. If the id has them in the value, you need to escape them as stated in the jQuery documentation.
$("input#categories\\["+lastrow+"\\]");
Try this
$("input#categories\\["+lastrow+"\\]").val("111");
$("input#description\\["+lastrow+"\\]").val("222");
Html code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#bSimpanItem').click(function () {
var iIndex = 0;
$('#tabel-item-borrowed tbody tr').each(function (index) {
iIndex = index + 1
$(this).find("td:eq(0)").find('#categories\\[' + iIndex + '\\]').val('111');
$(this).find("td:eq(1)").find('#description\\[' + iIndex + '\\]').val('22');
});
});
});
</script>
</head>
<body style="width:50%;">
<input type="button" value="bSimpanItem" id="bSimpanItem"/>
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can access the input inside the loop like this:
$('input[id="categories[' + lastrow + ']"]').val("111");