Parmar Shyamsingh Parmar Shyamsingh - 11 days ago 6
jQuery Question

how to generat grand total dynamicaly using javascript

here i want to create dynamically grand total. i got total of price and quantity. but i cant get grand total to total,so kindly request to solve this,here i have to use php for loop for ten row



function myFunction(time,v) {
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
}
function my(time,ans) {
//alert('You have not Login !!');
var p="demo"+time;
var y = document.getElementById(p).value;
//var z=y+ans;
document.getElementById("total").innerHTML = ans;
}

<table>
<?php
$i=0;
while($i<=10)
{
?>
<tr>
<td> <input id="price<?php echo $i; ?>" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="myFunction(<?php echo $i; ?>,this.value)" ></td>
<td><input id="demo<?php echo $i; ?>" type="text" value="0" onChange="my(<?php echo $i; ?>,this.value)" >

</td>
</tr>
<?php
$i++;
}?>

<h4> Total :- <span id = "total"></span></h4>
</table>




Answer

Store your Total count globaly, and Get all elements of your "demo" by querySelector and then calculate them.

Check snippest.

var _mytotal=0;
function _Function1(time,v)
{
	var p="price"+time;
	var d="demo"+time;
	var y = document.getElementById(p).value;
	var z = v;
	var ans=y*z;
	document.getElementById(d).value = ans;
	_mytotal=0;
	_Function2();
}
function _Function2()
{
	var demos = document.querySelectorAll('*[id^="demo"]');
	demos.forEach(_FunctionTotal);
}
function _FunctionTotal(item) 
{
    _mytotal = +_mytotal + +document.getElementById(item.id).value;
    document.getElementById("total").textContent = _mytotal;
}
<table>
	<tr>		
		<th>Price</th>
		<th>Quantity</th>
		<th>Total</th>
	</tr>
	<tr>
		<td><input id="price0" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(0,this.value)" ></td>
		<td><input id="demo0" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price1" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(1,this.value)" ></td>
		<td><input id="demo1" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price2" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(2,this.value)" ></td>
		<td><input id="demo2" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price3" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(3,this.value)" ></td>
		<td><input id="demo3" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price4" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(4,this.value)" ></td>
		<td><input id="demo4" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><h4>Grand Total</h4></td>
		<td>&nbsp;</td>
		<td><h4><span id = "total"></span></h4></td>
	</tr>
</table>