We Keep Coding

How to sum up all duration (hh:mm) from each TR with jquery?

I have 3 inputs. One input contain start time and another contain end time, the third input contain the duration between start time and end time in HH:mm format.
I want to sum up all the duration to give me the output in HH:mm format and show in the Total duration input textbox. I sum up all my duration but it does not give me anything. What's the error here? Can anyone help?
For instance:
<table id='timelist'>
<tr>
<td><input type="text" name="starttime" id="starttime" value="06:00"></td>
<td><input type="text" name="endtime" id="endtime" value="07:55"></td>
<td><input type="text" name="duration" id="duration" value="01:55"></td>
</tr>
<tr>
<td><input type="text" name="starttime" id="starttime" value="07:55"></td>
<td><input type="text" name="endtime" id="endtime" value="23:45"></td>
<td><input type="text" name="duration" id="duration" value="15:50"></td>
</tr>
<tr>
<td><input type="text" name="starttime" id="starttime" value="23:45"></td>
<td><input type="text" name="endtime" id="endtime" value="04:10"></td>
<td><input type="text" name="duration" id="duration" value="04:25"></td>
</tr>
</table>
<!----total hour output to show here---->
Total Duration: <input type="text" name="totalduration" id="totalduration">
This is my JS:
$('#timelist tr').each(function (i, row)
{
var fields = $(this).find(':input');
var startime = fields.eq(1).val();
var endtime = fields.eq(2).val();
var str0 = "";
var str1 = "";
if(startime >= "00:00" && startime < "06:00"){
str0 = "01/02/1970 " + startime;
}else{
str0 = "01/01/1970 " + startime;
}
if(endtime >= "00:00" && endtime <= "06:00"){
str1 = "01/02/1970 " + endtime;
}else{
str1 = "01/01/1970 " + endtime;
}
var diff = (Date.parse(str1)-Date.parse(str0))/1000/60;
var hours = String(100+Math.floor(diff/60)).substr(1);
var mins = String(100+diff%60).substr(1);
var duration = fields.eq(3).val(hours+':'+mins);
duration += duration;
});
$('#totalduration').val(duration);

One thing that needs pointing out ... having multiple elements with the same ID is invalid HTML
Fortunately in this case it's not a big deal, but it's something you should change
Here's a non-jquery answer
const result = [...document.querySelectorAll('#timelist #duration')].reduce((a, {value}) => {
const [hh, mm] = value.split(':').map(Number);
return a + hh * 60 + mm;
}, 0);
const mm = result%60, hh = (result-mm)/60;
document.getElementById('totalduration').value = `${hh.toString().padStart(2, 0)}:${mm.toString().padStart(2, 0)}`;
<table id='timelist'>
<tr>
<td><input type="text" name="starttime" id="starttime" value="06:00"></td>
<td><input type="text" name="endtime" id="endtime" value="07:55"></td>
<td><input type="text" name="duration" id="duration" value="01:55"></td>
</tr>
<tr>
<td><input type="text" name="starttime" id="starttime" value="07:55"></td>
<td><input type="text" name="endtime" id="endtime" value="23:45"></td>
<td><input type="text" name="duration" id="duration" value="15:50"></td>
</tr>
<tr>
<td><input type="text" name="starttime" id="starttime" value="23:45"></td>
<td><input type="text" name="endtime" id="endtime" value="04:10"></td>
<td><input type="text" name="duration" id="duration" value="04:25"></td>
</tr>
</table>
Total Duration: <input type="text" name="totalduration" id="totalduration">
And here's how you probably should do it, to fix the multiple identical ID problem
const result = [...document.querySelectorAll('#timelist .duration')].reduce((a, {value}) => {
const [hh, mm] = value.split(':').map(Number);
return a + hh * 60 + mm;
}, 0);
const mm = result%60, hh = (result-mm)/60;
document.getElementById('totalduration').value = `${hh.toString().padStart(2, 0)}:${mm.toString().padStart(2, 0)}`;
<table id='timelist'>
<tr>
<td><input type="text" name="starttime" class="starttime" value="06:00"></td>
<td><input type="text" name="endtime" class="endtime" value="07:55"></td>
<td><input type="text" name="duration" class="duration" value="01:55"></td>
</tr>
<tr>
<td><input type="text" name="starttime" class="starttime" value="07:55"></td>
<td><input type="text" name="endtime" class="endtime" value="23:45"></td>
<td><input type="text" name="duration" class="duration" value="15:50"></td>
</tr>
<tr>
<td><input type="text" name="starttime" class="starttime" value="23:45"></td>
<td><input type="text" name="endtime" class="endtime" value="04:10"></td>
<td><input type="text" name="duration" class="duration" value="04:25"></td>
</tr>
</table>
Total Duration: <input type="text" name="totalduration" id="totalduration">

Price Calculation in Javascript/Codeigniter

I want to calculate the Total Price for the order. I got a formula::
TotalWithoutTax = (UnitPrice*Quantity)+Transportation+Premium-Discount
TotalAmtInclTax = TotalWithoutTax + TotalTax
But I cannot get the output. Please help me and give me some advise on this. Thank You.
Javascript:
function calcPrice(qty[], unit_price[], gp[], discount[], totalwithouttax, totaltax, totalamtincltax) {
var quantity = document.getElementById('qty[]').value;
var unitPrice = document.getElementById('unit_price[]').value;
var premium = document.getElementById('gp[]').value;
var discount = document.getElementById('discount[]').value;
var transportation = document.getElementById('transportation[]').value;
var totalwithouttax = (unitPrice * quantity) + premium + transportation - discount;
document.getElementById(totalwithouttax).value = Math.round(totalwithouttax);
return true;
var totalwithouttax = document.getElementById('totalwithouttax').value;
var totaltax = document.getElementById('totaltax').value;
var totalamtincltax = totalwithouttax + totaltax;
document.getElementById(totalamtincltax).value = Math.round(totalamtincltax);
return true;
}
View:
<!-- **************************** START OF ITEM LIST 1 ************************ -->
<tr class="item-details">
<td><span class="rowNumber">1</span></td>
<td class="">
<?php
$options = array(
'' => '~Choose An Item~'
);
foreach ($item as $rows){
$options[$rows->id] = $rows->item_name;
}
$select = array(
'id' => 'item_name',
'class' => 'form-control'
);
echo form_dropdown('item_name[]', $options,set_value('item_name'),$select);
?>
</td>
<td class=""><input type="number" class="item-qty" name="qty[]" /></td>
<td><input type="number" name="weight[]" class="weight" /></td>
<td><input type="number" name="transportation[]" class="transporation" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="gp[]" name="gp[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="discount[]" name="discount[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="unit_price[]" name="unit_price[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td align="right">
<input type="text" id="totalwithouttax" name="totalwithouttax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
<td align="right">
<input type="text" id="totaltax" name="totaltax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
<td align="right">
<input type="text" id="totalamtincltax" name="totalamtincltax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
</tr><br/>

document.getElementById("totalwithouttax").value=Math.round(totalwithouttax);
this can solve a lot of issues a think

how to in set javascript id in input value

i want to inset my javascript id in to the place of input value .
if i give Interest name input value="100"
how can i get tc named table input value="75"
my input form
<tr>
<th>Loan Amount</th>
<th>INTEREST RATE %</th>
<tr>
<tbody>
<td><input disabled type="" name="tc" id="int_amount" class="formcontrol"value=""/></td>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate();"/ class="form-control" value=""/></td>
</tr>
</tbody>
javascript
var vatti = document.pricecal.Interest.value;
var Total = vatti -25;
if(vatti = null)
{
document.getElementById("int_amount").innerHTML = "Rs:"+" "+Total;
}
[want out put like this][1]

Hope this helps you.
function calculate(interest){
var vatti = interest.value;
if (vatti != '') {
var Total = vatti - 25;
document.getElementById("int_amount").value = Total;
}else{
document.getElementById("int_amount").value = '';
}
}
<table>
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate(this)" onchange="calculate(this)" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
</table>

Set the .value of the <input> element, not the .innerHTML
document.getElementById("int_amount").value = "Rs:"+" "+Total;

HTML:
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
Javascript:
document.getElementById('input2').onkeyup = function() {
document.getElementById('int_amount').value = (this.value != '') ? 'Rs: ' + (parseInt(this.value)-25) : '';
}

Jquery: Dynamic Loop table by its column and sum

i have these scenario, i would like to sum the
1) unit x on Table A with unit x on Table B
2) unit y on Table A with unit y on Table B
3) put the sum into Table C by its row index on Table A correspondingly
Below is my code, which is working fine:
Table A:
<table class="tableA" border='1'>
<tbody>
<tr>
<td></td>
<td>JAN</td>
<td>FEB</td>
<td>MAR</td>
</tr>
<tr>
<td>Unit X</td>
<td><input type="text" value="1" class="jan"></td>
<td><input type="text" value="2" class="feb"></td>
<td><input type="text" value="3" class="mar"></td>
</tr>
<tr>
<td>Unit Y</td>
<td><input type="text" value="2" class="jan"></td>
<td><input type="text" value="2" class="feb"></td>
<td><input type="text" value="2" class="mar"></td>
</tr>
</tbody>
</table>
Table B:
<table class="tableB" border='1'>
<tbody>
<tr>
<td></td>
<td>JAN</td>
<td>FEB</td>
<td>MAR</td>
</tr>
<tr>
<td>Unit X</td>
<td><input type="text" value="4" class="jan"></td>
<td><input type="text" value="4" class="feb"></td>
<td><input type="text" value="4" class="mar"></td>
</tr>
<tr>
<td>Unit Y</td>
<td><input type="text" value="5" class="jan"></td>
<td><input type="text" value="5" class="feb"></td>
<td><input type="text" value="5" class="mar"></td>
</tr>
</tbody>
</table>
Table C:
<table class="tableC" border='1'>
<tbody>
<tr>
<td></td>
<td>JAN</td>
<td>FEB</td>
<td>MAR</td>
</tr>
<tr>
<td>Unit X</td>
<td><input type="text" value="" class="jan"></td>
<td><input type="text" value="" class="feb"></td>
<td><input type="text" value="" class="mar"></td>
</tr>
<tr>
<td>Unit Y</td>
<td><input type="text" value="" class="jan"></td>
<td><input type="text" value="" class="feb"></td>
<td><input type="text" value="" class="mar"></td>
</tr>
</tbody>
</table>
Jquery:
$( document ).ready(function() {
$(".tableA").find(".jan").each(function() {
var value_A = $(this).val();
var row_index = $(this).closest("tr").index();
var value_B = $('.tableB').find("tr:eq("+row_index+") .jan").val();
var sum = parseInt(value_A) + parseInt(value_B);
$('.tableC').find("tr:eq("+row_index+") .jan").val(sum);
});
$(".tableA").find(".feb").each(function() {
var value_A = $(this).val();
var row_index = $(this).closest("tr").index();
var value_B = $('.tableB').find("tr:eq("+row_index+") .feb").val();
var sum = parseInt(value_A) + parseInt(value_B);
$('.tableC').find("tr:eq("+row_index+") .feb").val(sum);
});
$(".tableA").find(".mar").each(function() {
var value_A = $(this).val();
var row_index = $(this).closest("tr").index();
var value_B = $('.tableB').find("tr:eq("+row_index+") .mar").val();
var sum = parseInt(value_A) + parseInt(value_B);
$('.tableC').find("tr:eq("+row_index+") .mar").val(sum);
});
});
JSFiddle
Problem: current sum method are hard coded by its classname according to month, example: .jan .feb .mar
How do i do it dynamically to loop by its column without hard coded the classname, because the code will get longer until december.
thanks

The code for each function is generally the same (difference is really just the month. We can make this a generic function. i.e.
const processMonth = function($table, month) {
// Assume month = jan/feb/mar/...
var value_A = $table.val();
var row_index = $table.closest("tr").index();
var value_B = $('.tableB').find("tr:eq("+row_index+") ." + month).val();
var sum = parseInt(value_A) + parseInt(value_B);
$('.tableC').find("tr:eq("+row_index+") ." + month).val(sum);
});
Now we can do something like
// Some months for brevity
const months = ["jan", "feb", "mar", "apr", ... "nov", "dec"];
months.forEach(function(month) {
processMonth($(".tableA"), month);
});

Assuming for each TD has only input[type="text"], then you can do the following. You can use class selector if you want.
$('.tableC input[type="text"]').each(function() {
var indexTR = $(this).closest('tr').index();
var indexTD = $(this).closest('td').index();
var dataA = $('.tableA tr:eq(' + indexTR + ') td:eq(' + indexTD + ') input[type="text"]').val();
var dataB = $('.tableB tr:eq(' + indexTR + ') td:eq(' + indexTD + ') input[type="text"]').val();
var dataC = parseInt(dataA) + parseInt(dataB);
$(this).val(dataC);
});

Currency Converter Not Converting

The Currency converter up top works, but the table based one is a dead duck.
I need a value to be entered at Enter Amount of US Dollars and to be displayed in the corresponding value fields.
Here's the code:
<html>
<head>
<title>Convert US Dollars to Euros 2</title>
</head>
<body>
<form>
<table border="1">
<tbody>
<tr>
<th colspan="3">Monetary Exchange Rates
</th>
</tr>
<tr>
<th>Currency
</th>
<th>Rate
</th>
<th>Value
</th>
</tr>
<tr>
<td>British Pound
</td>
<td><input type="text" style="text-align: right;"
name="bp" value="0.62905" size="12" disabled="true" />
</td>
<td><input type="text" id="BP" value=""></td>
</tr>
<tr>
<td>Canadian Dollar
</td>
<td><input type="text" style="text-align: right;"
name="cd" value="0.98928" size="12" disabled="true" />
</td>
<td><input type="text" id="CD" value=""></td>
</tr>
<tr>
<td>Euro
</td>
<td><input type="text" style="text-align: right;"
name="eu" value="0.79759" size="12" disabled="true" />
</td>
<td><input type="text" id="EU" value=""></td>
</tr>
<tr>
<td>Japanese Yen
</td>
<td><input type="text" style="text-align: right;"
name="jy" value="78.5461" size="12" disabled="true" />
</td>
<td><input type="text" id="JY" value=""></td>
</tr>
<tr>
<td>Mexican Peso
</td>
<td><input type="text" style="text-align: right;"
name="mp" value="13.0729" size="12" disabled="true" />
</td>
<td><input type="text" id="MP" value=""> <!--
td-->
</td>
</tr>
<tr>
<td colspan="2"><b>Enter Amount of U.S. Dollars</b>
</td>
<td>
<input type="text" id="amount" name="amount" size="10" value="1" />
</td>
</tr></tbody>
</table> <br />
<input type="button" value="Calculate" onclick="calculate();">
<input type="reset" value="Reset" />
</form>
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
// var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
var select = document.getElementById("select");
var result = document.getElementById("result");
if(select.options[select.selectedIndex].value=="BP")
if (select.value === "USD to EUR") {
result.value = (amount * 0.7003).toFixed(2);
}
if (select.value === "EUR to USD") {
result.value = (amount * 1.4283).toFixed(2);
}
if (select.value === "0.62905") {
result.value = (amount * 0.62905).toFixed(2);
}
}
</script>
</body>
</html>
Any help would be greatly appreciated.

ID's should be unique, you cannot use same ID multiple times, and your select value does not work, change:
var select = document.getElementById("select");
to
var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;

Having dropped the select, the script you're looking for is:
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
document.getElementById("BP").value = (amount * BP).toFixed(2);
document.getElementById("CD").value = (amount * CD).toFixed(2);
document.getElementById("EU").value = (amount * EU).toFixed(2);
document.getElementById("JY").value = (amount * JY).toFixed(2);
document.getElementById("MP").value = (amount * MP).toFixed(2);
}
</script>
We wouldn't want to list those out explicitly like that for anything large-scale; we'd build a list and iterate through it. But I think writing it out this way answers your immediate question better without muddying the waters for you.

Try this code
if(select.options[select.selectedIndex].value=="your value")