Live Javascript calculating

**pjouwsma** · 04-26-2010 07:23 AM

Hi there!

I hope one of you javascript experts can help me out on this one. In html and PHP I made a purchase script. Al the products are listed inside a WHILE loop. The problem is, when I POST it starts entering data in the database. I would like the possibility that when I enter a number in the "aantal" field that it instantly calculates live how much it is going to cost.

So, "aantal$i" * inkoop_prijs = Subtotal
And, all Subtotals together = Total

Big respect to the one that solves this

Code:

<?php 
if(isset($leverancier_id)) { 
$i = 1; 
$totaal = 0;
while($prodinfo = mysql_fetch_assoc($prodres)) {  
?>

	<tr>	
		<td><?=$prodinfo['product_id'];?></td>
		<td><?=$prodinfo['naam'];?></td>
		<td align="center"><input name="aantal<?=$i;?>" type="text" value="" size="5" /></td>
		<td><?=number_format($prodinfo['inkoop_prijs'], 2);?></td>	
		<td align="right">Subtotal</td>
	</tr>
		<input type="hidden" name="product_id<?=$i;?>" value="<?=$prodinfo['product_id'];?>" />
		<input type="hidden" name="inkoop_prijs<?=$i;?>" value="<?=$prodinfo['inkoop_prijs'];?>" />

<?php 
$i++;
} }
?>

	<tr>
		<td colspan="2" valign="top" align="right"><strong>Totaal:</strong></td>
		<td colspan="2" valign="top">incl. 19% BTW </td>
		<td align="right"><strong>Total</strong></td>
	</tr>

**gayzuraz** · 04-26-2010 10:19 AM

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label>changer
<input type="text" name="chenger" id="chengerr" onkeyup="calculate()" />
<input type="text" name="pricer" id="calculated" />
</label>
</form>
<script type="text/javascript">
function calculate()
{
var x = document.getElementById('chengerr').value;
document.getElementById('calculated').value = x *5+"";
}
</script>
</body>

**Fang** · 04-26-2010 10:32 AM

Code:

window.onload=function() {
var aObj=document.getElementsByTagName('input');
var i=aObj.length; 
while(i--) { 
    if(aObj[i].name.indexOf('aantal')==0) { // all 'aantal' names
    	aObj[i].onblur = function() {totaal(this);};
        }
    }
};

function totaal(obj) {
if(!isNaN(obj.value)) {
	var tds = obj.parentNode.parentNode.getElementsByTagName('td');
    var temp = 0;
    var subTotaal = tds[4];
    if(!isNaN(subTotaal.innerHTML)) {temp = subTotaal.innerHTML;} // user changed existing value
    subTotaal.innerHTML = (obj.value * tds[3].innerHTML).toFixed(2);
    }
var totaal = document.getElementById('totaal');
if(isNaN(totaal.innerHTML)) {totaal.innerHTML = '';}
totaal.innerHTML = (totaal.innerHTML*1 + subTotaal.innerHTML*1 - temp).toFixed(2);
}

and

Code:

<td align="right"><strong id="totaal">Total</strong></td>

**pjouwsma** · 04-26-2010 11:10 AM

@Fang

Thanks for your help so far, really appreciate it and that's really some amazing script you posted there, it does calculate immediately when you enter a number in the field "aantal".
But the WHILE loop, looks up all products in my database and then lists it.
So when I open up the page there is more then 1 product listed.

The moment where I get a "NaN" error is when I insert a number in 2 different "aantal" fields. It automatically takes the latest inserted value and only calculates with that number, it doesn't add the previously entered number.

Hope you can help me with this one.
Thanks in advance.

**pjouwsma** · 04-26-2010 11:26 AM

I'm sorry, It's not your script, it's because of the . and ,

PHP automatically displays didgets like this; 4,500.00
Javascript probably needs it to be 4.500,00

Thanks again for the help!

**Fang** · 04-26-2010 12:31 PM

In Javascript it would be 4500.00 Regular Expressions can be used to solve the issue

Thread: Live Javascript calculating

Thread Tools

Display

Live Javascript calculating

I I figured ...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions