Live Javascript calculating

Printable View

04-26-2010, 07:23 AM
pjouwsma

Live Javascript calculating

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>
04-26-2010, 10:19 AM
gayzuraz

I I figured ...

<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>
04-26-2010, 10:32 AM
Fang

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>
04-26-2010, 11:10 AM
pjouwsma

@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.
04-26-2010, 11:26 AM
pjouwsma

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!
04-26-2010, 12:31 PM
Fang

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