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.
Related
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);
In my Meteor app, I have the following table which shows some info. Users can edit company name, address and email and save the changes by clicking the button beside.
<table class="table table-hover">
<thead>
<tr>
<th>Company Name</th>
<th>Company Address</th>
<th>Email Address</th>
<th>Last Login</th>
<th>Manage</th>
</tr>
</thead>
<tbody>
{{#each users}}
<tr>
<td><input type="text" name="companyName" value="{{companyName}}"></td>
<td><input type="text" name="companyAddress" value="{{companyAddress}}"</td>
<td><input type="text" name="companyEmail" value="{{profile.email}}"></td>
<td>{{date}}</td>
<td>
<input type="submit" class="btn btn-primary save" value="Save">
<input type="submit" class="btn btn-danger delete" value="Delete">
</td>
</tr>
{{/each}}
</tbody>
</table>
In event handler:
'click .save':function(e,inst){
var userID = this._id;
var companyName = inst.$('[name=companyName]').val();
var companyAddress = inst.$('[name=companyAddress]').val();
var companyEmail = inst.$('[name=companyEmail]').val();
console.log(companyName);
console.log(userID);
console.log(companyAddress);
console.log(companyEmail);
}
By doing so, It only can read the values of the first row of table. Then I add data-id in input field <td><input type="text" name="companyName" value="{{companyName}}" data-id="{{_id}}"></td> It is able to get company name from the table row. My question is how to get the rest of attributes.
You need to populate id for all input fields, I generally used to this like this
//in html
<input type="text" name="companyName{{_id}}" value="{{companyName}}">
//in helper
var companyName = inst.$(`[name=companyName${this._id}]`).val();
How can i enabled my textbox within a loop when it check the checkbox?. Can you help me guys how to do it.
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>Select</th>
<th>Duties and Responsibilities</th>
<th>Weight of Duties</th>
<th>Rate of Department Head</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
#for (int x = 0; x <= 7; x++)
{
<tr>
<td><input type="checkbox" class="form-control" /></td>
<td><input type="text" name="JdDescription" class="form-control" disabled/></td>
<td><input type="text" readonly name="WeightofDuties" class="form-control" /></td>
<td><input type="text" name="RateofHead" class="form-control" disabled/></td>
<td><input type="text" name="Remarks" class="form-control" disabled/></td>
</tr>
}
</tbody>
</table>
Fetch the parent <tr> element upon clicking a checkbox, then enable text inputs within this <tr> node:
$('input[type=checkbox]').change(function () {
var disabled = this.checked ? '' : 'disabled';
$(this).parents('tr').find('input[type=text]').prop('disabled', disabled);
});
This will also disable the input[type=text] fields again upon unchecking the checkbox. If you only want to enable a specific text field, modify the argument of .find('input[type=text]') selector accordingly.
If you also want to toggle the readonly text field, do it like so:
$(this).parents('tr').find('input[name="WeightofDuties"]')
.attr('readonly', !this.checked);
I have created a table in react js and now i want to read data of row and post it to database but m not able to read data of cell or row
i have tried a lot still nothing working for me
class Table extends Component {
state = {};
function = () => {
var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
var Table = document.getElementById("table");
alert(Cells[0].innerText);
};
render() {
return (
<div>
<html>
<body>
<table id="table" >
<tr id="somerow" bgcolor="#f5f5f5">
<th>Item Code</th>
<th>Name</th>
</tr>
<tr>
<td>
<Input type="text" />
</td>
<td>
<Input type="text" />
</td>
<td>
<Input type="number" min="0.01" step="0.01" />
</td>
<td>
<Input type="currency" />
</td>
</tr>
</table>
<Input type="button" name="click" onClick={this.function}
/>
even after putting value in the cells i get blank result in alert
and i even have to update these details to database so really need help
I want to calculate sum of the numbers the user has entered automatically.When the user delete one number the sum should auto calculate.How to calculate sum of array values using jquery.Please help me to solve this problem.
$(document).ready(function(){
$('.form-control').change(function(){
var total = 0;
$('.form-control').each(function(){
if($(this).val() != '')
{
totalvalue += parseInt($(this).val());
}
});
$('#totalvalue').html(totalvalue);
});
})(jQuery);
<h2 style="text-align:center;">INVOICE</h2>
<form id='students' method='post' name='students' action='index.php'>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>Job ID</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Price</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td><span id='snum'>1.</span></td>
<td><input class="form-control" type='text' id='txt_jobid' name='txt_jobid[]'/></td>
<td><input class="form-control" type='text' id='txt_quantity' name='txt_quantity[]'/></td>
<td><input class="form-control" type='text' id='txt_price' name='txt_price[]'/></td>
<td><input class="form-control" type='text' id='txt_totalprice' name='txt_totalprice[]'/> </td>
</tr>
</table>
<button type="button" class='btn btn-danger delete'>- Delete</button>
<button type="button" class='btn btn-success addmore'>+ Add More</button>
</div>
</form> Total: <div id="totalvalue">0</div>
SUBMIT FORM
</form>
Sometime you used total and sometimes totalValue. Name the variables the same. And remove the (jQuery) at the end. It's wrong there.
$(function() {
$('.form-control').change(function() {
var total = 0;
$('.form-control').each(function() {
if( $(this).val() != '' )
total += parseInt($(this).val());
});
$('#totalvalue').html(total);
});
// trigger initial calculation if wanted
.change();
});
Example: https://jsfiddle.net/0zpkow5L/
Initial calculation: https://jsfiddle.net/0zpkow5L/1/
Full working example of your code: https://jsfiddle.net/0zpkow5L/8/