We Keep Coding

How to display live the Total of an array input inside the foreach using javascript

I have this form which is in a foreach loop,
to get the value of the amount input "qty[]" it should be multiply to "uprice[]".
and the last input that is outside the foreach loop, it should display the total sum of all amount.
<tbody>
<?php foreach($_POST['porder'] as $porder): ?>
<tr>
<td>
<input type="text" id="itemnum[]" name="itemnum[]"
max=999 class="form-control form-control-line">
</td>
<td>
<input type="text" id="code[]" name="code[]" class="form-control form-control-line"
value="<?php echo $porder ; ?>"readonly>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="rev"
name="rev[]" class="form-control form-control-line" required>
</td>
<td>
<input style="text-transform:uppercase" type="text" id="desc"
name="desc[]" class="form-control form-control-line" required>
</td>
<td>
<input type="tel" id="qty<?=$porder?>" name="qty[]" min="1"
class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="tel" id="uprice<?=$porder?>" name="uprice[]" min="1"
class="form-control form-control-line" onkeyup="compute('<?=$porder?>')" required>
</td>
<td>
<input type="number" id="amount<?=$porder?>" name="amount[]"
onkeyup="total()" class="form-control form-control-line" >
</td>
</tr>
<?php endforeach ?>
<tr >
<td colspan="5" ></td>
<td><strong>Total
</td>
<td>
<input type="number" id="total" name="total" class="form-control" >
</td>
</tr>
I tried to use a javascript to display the amount and the total. I only get the amount but not the total.
<script>
function compute(id) {
var txtFirstNumberValue = document.getElementById('qty'+id).value;
var txtSecondNumberValue = document.getElementById('uprice'+id).value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('amount'+id).value = result;
}
}
</script>
<script>
function total(){
var amount = document.getElementsByName("amount[]");
var total = 0;
for (var i = 0; i <amount.length; i++) {
var input_value=amount[i];
var signle_value_input = input_value.value;
if(signle_value_input.length!=0)
total +=parseInt(input_value.value);
}
if (!isNaN(total)) {
document.getElementById('total').value = total;
}
}
</script>
The Total doesn't show.

<script>
function total(){
var total = 0;
var amount = document.getElementsByName('amount[]');
for (var i = 0; i <amount.length; i++) {
var inp=amount[i];
var signle_value_input = inp.value;
if(signle_value_input.length!=0)
total +=parseInt(inp.value)
}
if (!isNaN(total)) {
document.getElementById("total").value = total;
}
}
</script>

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) : '';
}

Portion of Javascript not working in Chrome

I'm having trouble with the script below working in Chrome. (It works perfectly in Firefox, and in IE.) Everything works except the calcTotal function, and I can't figure out why. **I've added the table that I'm using to get the variables from, if that helps clarify things. **
<script type="text/javascript">
function calcWages(){
document.getElementById('wagestotal').innerHTML = '';
var hours = new Number(document.getElementById('hours').value);
var rate = new Number(document.getElementById('rate').value);
document.getElementById('wagestotal').innerHTML = ((hours * rate).toFixed(2));
document.getElementById('wagestotal').value = ((hours * rate).toFixed(2));
}
function calcMilage(){
document.getElementById('milagetotal').innerHTML = '';
var miles = new Number(document.getElementById('miles').value);
document.getElementById('milagetotal').innerHTML = ((miles * .535).toFixed(2));
document.getElementById('milagetotal').value = ((miles * .535).toFixed(2));
}
function calcTotal(){
document.getElementById('total').innerHTML = '';
var wages = new Number(document.getElementById('wagestotal').innerHTML);
var milage = new Number(document.getElementById('milagetotal').innerHTML);
var travel = new Number(document.getElementById('travel').value);
var lodging = new Number(document.getElementById('lodging').value);
var food = new Number(document.getElementById('food').value);
var office = new Number(document.getElementById('office').value);
var other = new Number(document.getElementById('other').value);
document.getElementById('total').value = ((wages + milage + travel + lodging + food + office + other).toFixed(2));
}
</script>
Items for Reimbursement:<br/>
<Table>
<tr>
<td>Wages:</td>
<td>Hours:(8 a day Max)<input type="text" name="hours" id="hours" size="4" maxlength="3" onchange="calcWages(); calcTotal()"></td>
<td>Rate:<input type="text" name="rate" id="rate" size="3" maxlength="5" onchange="calcWages(); calcTotal()"></td>
<td>=</td>
<td><input readonly name="wagestotal" id="wagestotal" size="6" maxlength="7"/></td>
</tr>
<tr>
<td>Mileage:</td>
<td>Miles<input type="text" name="miles" id="miles" size="4" maxlength="4" onchange="calcMilage(); calcTotal()"></td>
<td>IRS rate ($0.535)</td>
<td>=</td>
<td><input readonly name="milagetotal" id="milagetotal" size="6" maxlength="7"/></td>
</tr>
<tr>
<td>Travel:</td>
<td colspan="2"><input type="text" name="travelitem" id="travelitem" size="36"></td>
<td>=</td>
<td><input type="text" name="travel" id="travel" size="6" maxlength="7" onchange="calcTotal()"> </td>
</tr>
<tr>
<td>Lodging:</td>
<td colspan="2"><input type="text" name="lodgingitem" id="lodgingitem" size="36"> </td>
<td>=</td>
<td><input type="text" name="lodging" id="lodging" size="6" maxlength="7" onchange="calcTotal()"></td>
</tr>
<tr>
<td>Food:</td>
<td colspan="2"><input type="text" name="fooditem" id="fooditem" size="36"> </td>
<td>=</td>
<td><input type="text" name="food" id="food" size="6" maxlength="7" onchange="calcTotal()"></td>
<tr>
<td>Office Supplies:</td>
<td colspan="2"><input type="text" name="officeitem" id="officeitem" size="36"> </td>
<td>=</td>
<td><input type="text" name="office" id="office" size="6" maxlength="7" onchange="calcTotal()"></td>
</tr>
<tr>
<td>Other:</td>
<td colspan="2"><input type="text" name="otheritem" id="otheritem" size="36"></td>
<td>=</td>
<td><input type="text" name="other" id="other" size="6" maxlength="7" onchange="calcTotal()"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Grand Total:</td>
<td>=</td>
<td><input readonly name="total" id="total" size="6" maxlength="9"/></td>
</tr>
</table>

Try to use
+document.getElementById('wagestotal').innerHTML
instead of
new Number(document.getElementById('wagestotal').innerHTML)
or just use
Number(document.getElementById('wagestotal').innerHTML)
in cases where you get values:
var wages = Number(document.getElementById('wagestotal').innerHTML);
var milage = Number(document.getElementById('milagetotal').innerHTML);
var travel = Number(document.getElementById('travel').value);
var lodging = Number(document.getElementById('lodging').value);
var food = Number(document.getElementById('food').value);
var office = Number(document.getElementById('office').value);
var other = Number(document.getElementById('other').value);
document.getElementById('total').value = new Number(wages + milage + travel + lodging + food + office + other).toFixed(2);

Edit Quantity Using Javascript price will adjust

I'm currently doing an project on online shopping cart, whereby customers can edit the quantity before checkout. I wanted to make it such that when customer edit the quantity, the price of the item and total price of all items will be adjusted. I know I can achieve that though javascript. Can't really work and understand it. It will be nice if someone would help me. Thank you so so much!
Ps: I am not sure if my codes are correct, but here's what I tried:
<script type="text/javascript">
function update(form){
var quantity = document.getElementById('#quantity');
var price = quantity * ($list['price']);
document.getElementById("price").value = price;
​}
</script>`
I have not done for the total price yet because the price itself isn't working. I know there's something I miss out. Hope someone can enlighten me.
My HTML:
`//database query
<td align='middle'><input type="number" onChange="update(this)" id="quantity" name="quantity" min="1" max='<?php echo $list['quantity'] ?>' value='1'></td>
<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td>
<td><input type="text" name="amount" id="amount" readonly></td>`
I may have made stupid mistakes,so it will be nice if someone would explain about how javascript works if I got the wrong concepts. Thanks so much for helping!!:)

see demo here
look this line
quantity = document.getElementById('#quantity');
in this line remove '#'
quantity = document.getElementById(**'quantity'**);
and use parseint to convert to integer
var price = quantity * ($list['price']);
$list['price'] is false
to get price you need to do like this:
document.getElementById('price').value;
final code is :
form.php
//database query
<td align='middle'><input type="number" onChange="update(this)" id="quantity" name="quantity" min="1" max='<?php echo $list['quantity'] ?>' value='1'></td>
<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td>
<td><input type="text" name="amount" id="amount" readonly></td>`
script.js
<script type="text/javascript">
function update(form){
var quantity = document.getElementById('quantity').value;
var price = document.getElementById("price").value;
price = parseInt(price);
quantity = parseInt(quantity);
var amount= quantity * price ;
document.getElementById("amount").value = amount;
}
</script>`

demo here
index.php
<form>
<table>
<thead>
<tr>
<th>quantity</th>
<th>price</th>
<th>amount</th>
</tr>
</thead>
<tbody>
<!-- if u use php
<?php foreach($i=0; $i<$count; $i++){ ?>
<tr>
<td><input type="number" id="quantity_$i" name="quantity_$i" min="1" max='20' value='1'
onChange="iteration = 1; update(iteration)" >
</td>
<td><input type="text" id="price_$i" value='25' readonly='readonly' ></td>
<td><input type="text" name="amount_$i" id="amount_$i" readonly value='25'></td>
</tr>
<?php } ?>
-->
<tr>
<td><input type="number" id="quantity_1" name="quantity_1" min="1" max='20' value='1'
onChange="iteration = 1; update(iteration)" >
</td>
<td><input type="text" id="price_1" value='25' readonly='readonly' ></td>
<td><input type="text" name="amount_1" id="amount_1" readonly value='25'></td>
</tr>
<tr>
<td><input type="number" id="quantity_2" name="quantity_2" min="1" max='20' value='1'
onChange="iteration = 2; update(iteration)" >
</td>
<td><input type="text" id="price_2" value='15' readonly='readonly' ></td>
<td><input type="text" name="amount_2" id="amount_2" readonly value='15'></td>
</tr>
</tbody>
</table>
</form>
script.js
function update(iteration){
// alert(iteration);
var quantity = document.getElementById('quantity_' + iteration).value;
// alert('quantity_' + iteration);
var price = document.getElementById('price_' + iteration).value;
price = parseInt(price);
quantity = parseInt(quantity);
var amount= quantity * price ;
document.getElementById('amount_' + iteration).value = amount;
}

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")