Develop Reference

dynamic table input value calculations

I am trying to get the value of a dynamic table cell. following is the code, but i only get undefined
Javascript and HTML given below:
function calcTot(i) {
unitPrice = document.getElementById("invoice_details").rows[i].cells[6].innerHTML.value;//gets the unit price for the item
alert(unitPrice);
quantity = document.getElementById("invoice_details").rows[i].cells[7].childNodes[0].value;
//alert(quantity);
dis = document.getElementById("invoice_details").rows[i].cells[8].children[0].value;
//alert(dis);
final_amt = (parseFloat(unitPrice) * parseFloat(quantity)) - (parseFloat(unitPrice) * parseFloat(quantity) * parseFloat(dis)) / 100;
//alert(final_amt);
document.getElementById("invoice_details").rows[i].cells[9].childNodes[0].value = final_amt.toFixed(2);
//calcTotal();
}
<tbody id="generate_invoice_table">
<tr>
<td><input class="form-control" readonly="" value="57" name="item_id[]"></td>
<td><input class="form-control" readonly="" value="Toyota" name="supplier_name[]"></td>
<td><input hidden="" class="form-control" readonly="" value="Item" name="type[]"></td>
<td><input class="form-control" readonly="" value="Fan Belt Aqua" name="item_description[]"></td>
<td><input class="form-control" readonly="" value="1" name="available_qty[]"></td>
<td><input class="form-control" readonly="" value="12000.00" name="retail_price[]"></td>
<td><input type="text" value="0" class="form-control text-right" name="qty[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" value="0" class="form-control text-right" name="discount[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" class="form-control text-right" name="price[]"></td>
</tr>
</tbody>

Passing multiple parameters with serialize jQuery in PHP

I have a problem with a serialized form. I need to pass multiple rows for creating an invoice, but it passes just the first row.
This is a form:
<form action="" id="generate_invoice" method="POST">
<td><input type="number" class="form-control n_invoice" name="n_invoice[]"></td>
<td><input type="date" class="form-control data" name="data[]"></td>
<td><input type="text" class="form-control description" name="description[]"></td>
<td><input type="number" class="form-control price" name="price[]" step=any></td>
<td><input type="number" class="form-control vat" name="vat[]">
</form>
This is a function which adds new rows:
function addrow_invoice() {
var i = $('#invoiceTable tr').length;
var tr = '<tr>'+
'<td><input type="checkbox" class="case"/></td>'+
'<td></td>'+
'<td></td>'+
'<td><input type="text" class="form-control description" name="description[]"></td>'+
'<td><input type="number" class="form-control price" name="price[]"></td>'+
'<td><input type="number" class="form-control vat" name="vat[]"></td>'+
'</tr>';
$('table#invoiceTable').append(tr);
i++;
};
And this is a test:
for($i = 0; $i<count($_POST['description']); $i++)
{
echo "{$_POST['description'][$i]}";
echo "<br>";
}

The issue is because your HTML is invalid. The form needs to wrap the table element, not be inside it. Because the HTML is invalid, the location of the form is moved so that it's not wrapping your input elements, hence nothing gets serialised.
Your HTML needs to be changed to this:
<form action="" id="generate_invoice" method="POST">
<table id="invoiceTable">
<tr>
<td><input type="number" class="form-control n_invoice" name="n_invoice[]"></td>
<td><input type="date" class="form-control data" name="data[]"></td>
<td><input type="text" class="form-control description" name="description[]"></td>
<td><input type="number" class="form-control price" name="price[]" step=any></td>
<td><input type="number" class="form-control vat" name="vat[]">
</tr>
<!-- additional rows appended here... -->
</table>
</form>

Need help for array field

This script works fine for me:
<script>
calculate = function(){
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)* parseInt(minutes);
}
</script>
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td>
<input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]">
</td>
<td>
<input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]">
</td>
<td>
<input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" >
</td>
<td>
<input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" >
</td>
<td>
<input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" >
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<input class="submit" type="submit" value="Confirm" />
<input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" />
</form>
But I need to calculate All Subtotal

Some issues:
If you add rows, you'll have to avoid that you get duplicate id property values in your HTML. It is probably easiest to just remove them and identify the input elements via their names, which does not have to be unique
It is bad practice to assign to a non-declared variable. Use var, and in the case of functions, you can just use the function calculate() { syntax.
Make the subtotal input elements read-only by adding the readonly attribute, otherwise the user can change the calculated total.
Instead of responding on blur events, you'll get a more responsive effect if you respond to the input event. And I would advise to bind the event handler via JavaScript, not via an HTML attribute.
I would fix some spelling errors in your elements (but maybe they make sense in your native language): Quantity with an 'a', UnitPrice without the 'e'.
You can use querySelectorAll to select elements by a CSS selector, and then Array.from to iterate over them.
See below snippet with 2 rows:
function calculate(){
var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]');
var quantities = document.querySelectorAll('[name=Quantity\\[\\]]');
var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]');
var grandTotal = 0;
Array.from(subTotals, function (subTotal, i) {
var price = +unitPrices[i].value * +quantities[i].value;
subTotal.value = price;
grandTotal += price;
});
// Maybe you can also display the grandTotal somehwere.
}
document.querySelector('form').addEventListener('input', calculate);
input { max-width: 7em }
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
</tbody>
</table>
</form>

how to add new row data in current json array angularjs

i have added new row but i want update new row data also in database but there is no updated data how to get new row data also add address json array
<tr ng-repeat="x in Profile.addresses">
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.site_name ' name='site_name'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.street_address ' name='street_address'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.city ' name='city'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.state ' name='state'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.country ' name='country'></td>
<tr ng-repeat="lines in array">
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.site_name ' name='site_name'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.street_address ' name='street_address'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.city ' name='city'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.state ' name='state'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.country ' name='country'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.zip_code ' name='zip_code'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.phone_number ' name='phone_number'></td>
</tr>
<div class="col-md-2">
<a href="" data-toggle="tooltip" title="Add Address" ng-click="addRow()"><i class="fa fa-plus fa-2x cust_primary" aria-hidden="true">

In your controller, create a counter and an array.
$scope.i = 0;
$scope.array = [];
Everytime your user clicks on the button, add one to the counter and create the array.
$scope.addRow = function() {
$scope.i++;
$scope.array = [];
for(var i = 0; i < $scope.i; i++) {
$scope.array.push(i);
}
}
In your html, simply repeat the lines based on that counter.
<tr ng-repeat="lines in array">
// Your tds
</tr>
EDIT Since I can't understand your english, I will give you a generic answer.
Your controller must have an array of objects
$scope.i = 0;
$scope.array = [{
id: 0,
address: 'address 1',
name: 'Jack Reacher'
}, {
id: 1,
address: 'address 2',
name: 'Ethan Hawk'
}];
you will then slightly change your addRow function.
$scope.addRow = function() {
$scope.i++;
$scope.array = [];
for(var i = 0; i < $scope.i; i++) {
$scope.array.push({
id: null,
address: '',
name: ''
});
}
}
And in your HTML you use it.
<tr ng-repeat="object in array">
<td>{{object.id}}</td>
<td><input type="text" ng-model="object.address" /></td>
<td><input type="text" ng-model="object.name" /></td>
</tr>
And if you want to save it, you use an $http request. I'll let you handle that part.

How to auto calculate table rows using jquery?

I have a table with 3 table rows, each row contains 5 columns with input text boxes, the last column is for the total of the values inputted in the 4 columns. I want to calculate the total automatically using jquery or javascript after the 4 columns was filled with values. How could I do this? Here is my table code.
Table
<table name="tbl_a" id="tbl_a">
<tr>
<td><span style="margin-left:30px;">a. Provision of certified seeds</span></td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[a]" id="a" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[b]" id="b" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[c]" id="c" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[d]" id="d" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_1]" id="total_1" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td></td>
<td>no. of farmers</td>
<td></td>
<td><input type="text" class="form-control" name="at[e]" id="e" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[f]" id="f" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[g]" id="g" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[h]" id="h" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_2]" id="total_2" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td style="text-align:center;">Rehab Seeds</td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[i]" id="i" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[j]" id="j" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[k]" id="k" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[l]" id="l" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_3]" id="total_3" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
</table>

First of all please google for what you wanted to achieve, learn yourself, try to find the solution. If you still not succeeded, ask question with the relevant code that you have tried and with some playgrounds such as jsfiddle.net or jsbin.com etc.
However, here is the script which I used. I added total to the last input field.
$(function () {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
$(this).find('input[type=text]').bind("keyup", function () {
calculateSum();
});
});
function calculateSum() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
var sum = 0;
$(this).find('input[type=text]').not('.total').each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$(this).find('.total').val(sum.toFixed(2));
});
}
});
Here is the result. In this script, you can have any number of rows, but the last row needed to have a different class name otherwise its value also added to the total.

On input change, calculate inputs's total. If one input is empty return, if not assign total to last input of tr.
$(".form-control").change(function(){
var tr = $(this).parents("tr");
var total = 0;
for (var i = 0; i < tr.find("input").length; i++) {
if ($(tr).find("input").eq(i).val() == 0 || $(tr).find("input").eq(i).val() == "")
return;
total += parseInt($(tr).find("input").eq(i).val());
}
$(tr).find("input").eq($(tr).find("input").length-1).val(total);
}