My first problem is my for loop not working, I'm trying to get my final total value from the two rows total by adding both of them up. And my second problem is when I press my button it's not executing my function calculateTotal().
been learning javascript for around 4 weeks and I guess I still count as a beginner and I'm not very good with javascript
function calculateTotal() {
// first row //
var Unit_Price_1 = document.getElementById('Unit Price_1').value;
var Quantity_1 = document.getElementById('Quantity_1').value;
var Total_1 = document.getElementById('Total_1')
var Total_Amount_1 = Unit_Price_1 * Quantity_1;
Total_1.value = Total_Amount_1
// Second row //
var Unit_Price_2 = document.getElementById('Unit Price_2').value;
var Quantity_2 = document.getElementById('Quantity_2').value;
var Total_2 = document.getElementById('Total_2')
var Total_Amount_2 = Unit_Price_2 * Quantity_2;
Total_2.value = Total_Amount_2
var arr = document.getElementsByName('total');
var total = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
total += pareseInt(arr[i].value);
}
document.getElementById('total_final').value = total;
}
<table>
<thead>
<tr>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<!---------------- ROW 1 ------------------>
<td>
<input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()" />
</td>
<td>
<input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()" />
</td>
<td>
<input required type="number" name="total" value="0.00" readonly="readonly" id="Total_1" />
</td>
</tr>
<!---------------- ROW 2 ------------------>
<td>
<input type="number" name="unit price" placeholder="0.00" id="Unit Price_2" onkeyup="calculateTotal()" />
</td>
<td>
<input type="number" name="Quality" placeholder="0" id="Quantity_2" onkeyup="calculateTotal()" />
</td>
<td>
<input required type="number" name="total" value="0.00" readonly="readonly" id="Total_2" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<input type="button" style="background-color: white" value="Calculate Grand Total Price" id="click me" onclick="calculateTotal()" />
</td>
<td colspan="2">
<input type="number" name="total_final" id="total_final" value="0.00" style="font-size: 18px; background-color: silver" readonly="readonly" />
</td>
</tr>
</tfoot>
</table>
There is a typo in total += pareseInt(arr[i].value); It is parseInt.
I ran your code and it is working fine.
Related
So I'm trying to assign the result value(from user input Unit_Price_1 * Quantity_1) to the total text field for each row. I get it to work for my first row but cant work for my second row ?, Kinda still a noob trying to do something with my idea
HTML code :
<table>
<thead>
<tr>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<!---------------- ROW 1 ------------------>
<td>
<input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()"/>
</td>
<td>
<input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()"/>
</td>
<td>
<input
required
type="number"
name="total"
value="0.00"
readonly="readonly"
id="Total_1"
/>
</td>
</tr>
<!---------------- ROW 2 ------------------>
<td>
<input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()"/>
</td>
<td>
<input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()"/>
</td>
<td>
<input
required
type="number"
name="total"
value="0.00"
readonly="readonly"
id="Total_1"
/>
</td>
</tr>
</tbody>
JavaScript:
function calculateTotal() {
var Unit_Price_1 = document.getElementById('Unit Price_1').value;
var Quantity_1 = document.getElementById('Quantity_1').value;
var Total_1 = document.getElementById('Total_1')
var Total_Amount_1 = Unit_Price_1 * Quantity_1;
Total_1.value = Total_Amount_1
}
ids must be unique.
Your first function only considers the first two inputs. Create a new function that does the same for the first two inputs on the next row.
Try this:
function calculateTotal() {
var Unit_Price_1 = document.getElementById('Unit Price_1').value;
var Quantity_1 = document.getElementById('Quantity_1').value;
var Total_1 = document.getElementById('Total_1')
var Total_Amount_1 = Unit_Price_1 * Quantity_1;
Total_1.value = Total_Amount_1
}
function calculateTotal2() {
var Unit_Price_1 = document.getElementById('Unit Price_2').value;
var Quantity_1 = document.getElementById('Quantity_2').value;
var Total_1 = document.getElementById('Total_2')
var Total_Amount_1 = Unit_Price_1 * Quantity_1;
Total_1.value = Total_Amount_1
}
<table>
<thead>
<tr>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<!---------------- ROW 1 ------------------>
<td>
<input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()" />
</td>
<td>
<input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()" />
</td>
<td>
<input required type="number" name="total" value="0.00" readonly="readonly" id="Total_1" />
</td>
</tr>
<!---------------- ROW 2 ------------------>
<td>
<input type="number" name="unit price" placeholder="0.00" id="Unit Price_2" oninput="calculateTotal()" />
</td>
<td>
<input type="number" name="Quality" placeholder="0" id="Quantity_2" oninput="calculateTotal2()" />
</td>
<td>
<input required type="number" name="total" value="0.00" readonly="readonly" id="Total_2" />
</td>
</tr>
</tbody>
I created the following table by defining different classes in javascript (the table is actually bigger but I reduced it to 3 lines for a better comprehension).
I type manually the inputs in the first column and it calculates A, B, C and SUM.
A = 5 * input
B = 4 * input
C = 3 * input
SUM = A + B + C
Total SUM =should be in this example 36 + 24 + 60 (actually there are more rows in my column) but I don't know exactly how to automatize the job. I am trying something in this direction but it does not do the job:
forEach ({
row.querySelector(".total").value +- = (Number(row.querySelector(".sum"))
Here is the code of the table and how I generate the values:
<table class="egt" bgcolor="Olive">
<! --SEGUNDA LINEA -->
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<! --TERCERA LINEA -->
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<! --ULTIMA LINEA -->
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" /></td>
</tr>
</table>
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
row.querySelector(".fuel").addEventListener("input", (event) => {
calculate(row)
})
})
function calculate(row) {
let fuel = row.querySelector(".fuel").value;
row.querySelector(".A").value = (5 * fuel);
row.querySelector(".B").value = (4 * fuel);
row.querySelector(".C").value = (3 * fuel);
row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
}
Thanks for your advise!
I tried to simplify your example a bit. Selected all the elements we're going to need at the start of the code and then attached the event listener to your inputs. When input value changes, we're recalculating the sum of the entire row and the total sum afterwards.
const totalSum = document.querySelector('.total');
const inputs = document.querySelectorAll('.fuel');
const sums = document.querySelectorAll('.sum');
inputs.forEach(input => {
input.addEventListener('input', event => {
recalculateRowSum(input);
recalculateTotalSum();
});
});
function recalculateRowSum(input) {
const row = input.parentNode.parentNode;
const a = input.value * 5;
const b = input.value * 4;
const c = input.value * 3;
const sum = a + b + c;
row.querySelector('.A').value = a;
row.querySelector('.B').value = b;
row.querySelector('.C').value = c;
row.querySelector('.sum').value = sum;
}
function recalculateTotalSum() {
totalSum.value = [...sums].reduce((total, current) => total += +current.value, 0);
}
<table class="egt" bgcolor="Olive">
<! --SEGUNDA LINEA -->
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<! --TERCERA LINEA -->
<tbody>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<! --ULTIMA LINEA -->
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" /></td>
</tr>
</tbody>
</table>
add new function to update total value
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
row.querySelector(".fuel").addEventListener("input", (event) => {
calculate(row)
})
})
function calculate(row) {
let fuel = row.querySelector(".fuel").value;
row.querySelector(".A").value = (5 * fuel);
row.querySelector(".B").value = (4 * fuel);
row.querySelector(".C").value = (3 * fuel);
row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
calculateSum();
}
function calculateSum() {
let elements = document.querySelectorAll("tbody .sum");
let total = 0;
[...elements].forEach(ele => {
total += parseFloat(ele.value) || 0;
})
document.querySelector("tbody .total").value = total;
}
Let's clean it up:
const setup = () => {
const rows = document.querySelectorAll('.fuel');
[...rows].forEach(row => row.addEventListener('input', onInput));
}
const calculateSum = () => {
const sums = [...document.querySelectorAll('.sum')].map(input => Number.parseInt(input.value));
const result = sums.reduce((sum, value) => sum + value);
document.querySelector('.total').value = result;
}
const onInput = event => {
const input = event.target;
const currentIndex = input.dataset.rowIndex;
const fuel = Number.parseInt(input.value, 10);
const [A, B, C] = [(5 * fuel), (4 * fuel), (3 * fuel)]
const sum = A + B + C;
document.querySelector(`[data-row-index="${currentIndex}"].A`).value = A;
document.querySelector(`[data-row-index="${currentIndex}"].B`).value = B;
document.querySelector(`[data-row-index="${currentIndex}"].C`).value = C;
document.querySelector(`[data-row-index="${currentIndex}"].sum`).value = sum;
calculateSum();
}
//load
window.addEventListener('load', setup);
tbody input[type="number"] {
text-align: center;
}
<table class="egt" bgcolor="Olive">
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="fuel" data-row-index="0" type="number">
</td>
<td>
<input class="A" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="0" type="number" disabled>
</td>
</tr>
<tr>
<td>
<input class="fuel" data-row-index="1" type="number">
</td>
<td>
<input class="A" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="1" type="number" disabled>
</td>
</tr>
<tr>
<td>
<input class="fuel" data-row-index="2" type="number">
</td>
<td>
<input class="A" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="2" type="number" disabled>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" disabled></td>
</tr>
</tfoot>
</table>
I have a table with rows of textboxes as inputs that hold numbers/hours with css .hours. I am trying to get the table to update totals when the row is deleted checkbox is checked/clicked.
How to Update the totals in the row & col at the End? when the delete row checkbox is checked.
2 steps: I zero out the values in the deleted row, and then want to update the new totals.
JS fiddle with HTML
// Call this function, When CheckBox with css .deleteRowis clicked
$('#Maintable').on('click', '.deleteRow', function ()
{
if ($(this).is(":checked")) {
var row = $(this).closest('tr').css({ 'color': 'red' });
var hours = row.find('.hours');
$.each(hours, function (index, item) {
if ($(this).val()) { // if there is a value
$(this).val('0');
// Total the rows does not work??
HoursChangedFunction($(this));
}
});
} // :checked ends
// when the row is deleted from the checkbox, find it and call this function
// 1) First make all .hours 0, 2) and then redo the totals
var HoursChangedFunction = function () {
var columnIndex = $(this).closest('td').index();
var row = $(this).closest('tr');
var hours = row.find('.hours');
var rowTotal = 0;
$.each(hours, function (index, item) {
rowTotal += Number($(this).val());
});
row.children('td.rowtotal').text(rowTotal.toFixed(2));
var columnTotal = 0;
var grandTotal = 0;
var rows = $('#Maintable tr');
$.each(rows, function (index, item) {
columnTotal += Number($(this).children('td').eq(columnIndex).children('.hours').val());
grandTotal += Number($(this).children('.rowtotal').text());
});
footer.eq(columnIndex).text(columnTotal.toFixed(2));
total.text(grandTotal.toFixed(2));
};
Because you have a lot of IDs you may avoid HoursChangedFunction.
In order to get the corresponding cell in the current col you can use the eq method
Moreover, you can use .text( function ) to simplify the task.
You can simplify the event handler from:
$('#Maintable').on('click', '.deleteRow', function ()
to:
$('#Maintable').on('change', '.deleteRow:checked', function () {
because inside the handler you execute the logic only when the checkbox is checked.
The snippet:
$('#Maintable').on('change', '.deleteRow:checked', function () {
var row = $(this).closest('tr').css({'color': 'red'});
$('#grandtotal').text(function(idx, txt) {
return (+txt - +row.find('.rowtotal').text()).toFixed(2);
});
row.find('.rowtotal').text('0.00');
row.find('.hours').each( function (index, item) {
if (item.value != '0.00') {
$('#Maintable').closest('table').find('tfoot tr td').eq(index + 2).text(function(idx, txt) {
return (+txt - +item.value).toFixed(2);
});
item.value = '0.00';
}
});
});
.hours {
width: 50px;
box-sizing: border-box;
border: solid 1px #d9e1e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Task</th>
<th>Code</th>
<th>day1</th>
<th>day2</th>
<th>dy3</th>
<th>day4</th>
<th>day5</th>
<th>day6</th>
<th>day7</th>
<th>Total</th>
<th>Del</th>
</tr>
</thead>
<tbody id="Maintable">
<tr>
<td>
<span class="project">Project 1</span>
</td>
<td>
<span class="timecode">code 1A</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="2.50">
</td>
<td>
<input class="hours" type="text" value="4.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">6.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 2</span>
</td>
<td>
<input type="hidden" name="Records.Index" value="1">
<span class="timecode">code 2B</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="4.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">4.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 3</span>
</td>
<td>
<span class="timecode">code 2C</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" ype="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">0.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>0.00</td>
<td>7.50</td>
<td>4.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td id="grandtotal">11.50</td>
</tr>
</tfoot>
</table>
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
Dynamically adding table rows using below code. User ID is appended for input id.
var selResId = jQuery('#grid').jqGrid('getGridParam', 'selarrrow');
var j=1;
for (var i=0, il=selResId.length; i < il; i++) {
var name = jQuery('#grid').jqGrid('getCell', selResId[i], 'USER_NAME');
$('#addr'+j).html("<td style='text-align:center;'>"+name+"</td><td><input id='hours_"+selResId[i]+"' value='80' type='text' readonly /></td><td><input id='rate_"+selResId[i]+"' type='text' /></td><td><input name='markup_"+selResId[i]+"' type='text'/></td><td><input name='totalcost_"+selResId[i]+"' type='text' readonly></td>");
$('#resource_table').append('<tr id="addr'+(j+1)+'"></tr>');
j++;
}
}
HTML Generated
<tr id="addr1">
<td>John Doe</td>
<td><input type="text" readonly="" value="80" id="hours_10"></td>
<td><input type="text" value="" id="rate_10"></td>
<td><input type="text" value="" id="markup_10"></td>
<td><input type="text" readonly="" value="" id="totalcost_10"></td>
</tr>
<tr id="addr2">
<td>Foo User</td>
<td><input type="text" readonly="" value="80" id="hours_11"></td>
<td><input type="text" value="" id="rate_11"></td>
<td><input type="text" value="" id="markup_11"></td>
<td><input type="text" readonly="" value="" id="totalcost_11"></td>
</tr>
How do I multiply input values for hours, rate and markup and show it under total cost input using below formula. The event could be keyup.
Initially, totalcost = hours * rate
Case 1: If markup (%) > 0, for eg: 10%, then markup_cost = (hours * rate * markup) / 100
totalcost = (hours * rate) + markup_cost
Case 2: If markup (%) < 0, for eg: -10%, then markup_cost = (hours * rate * markup) / 100
totalcost = (hours * rate) - markup_cost
Try to use starts with selector like,
$(function(){
function setTotalCost(n){
var h=Number($('#hours_'+n).val()),
m=Number($('#markup_'+n).val()), // taking 0 if empty
r=Number($('#rate_'+n).val());
$('#totalcost_'+n).val(h*m*r);
}
$('[id^="rate_"]').on('keyup',function(){
var n = this.id.replace('rate_','');// get the number
setTotalCost(n);
});
$('[id^="markup_"]').on('keyup',function(){
var n = this.id.replace('markup_','');// get the number
setTotalCost(n);
});
});
$(function(){
function setTotalCost(n){
var h=Number($('#hours_'+n).val()),
m=Number($('#markup_'+n).val()), // taking 0 if empty
r=Number($('#rate_'+n).val());
$('#totalcost_'+n).val(h*m*r);
}
$('[id^="rate_"]').on('keyup',function(){
var n = this.id.replace('rate_','');// get the number
setTotalCost(n);
});
$('[id^="markup_"]').on('keyup',function(){
var n = this.id.replace('markup_','');// get the number
setTotalCost(n);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="addr1">
<td>John Doe</td>
<td>
<input type="text" readonly="" value="80" id="hours_10">
</td>
<td>
<input type="text" value="" id="rate_10">
</td>
<td>
<input type="text" value="" id="markup_10">
</td>
<td>
<input type="text" readonly="" value="" id="totalcost_10">
</td>
</tr>
<tr id="addr2">
<td>Foo User</td>
<td>
<input type="text" readonly="" value="80" id="hours_11">
</td>
<td>
<input type="text" value="" id="rate_11">
</td>
<td>
<input type="text" value="" id="markup_11">
</td>
<td>
<input type="text" readonly="" value="" id="totalcost_11">
</td>
</tr>
</table>