# Live Javascript calculating

• 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.
• 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

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.09661 seconds
• Memory Usage 2,366KB
• Queries Executed 11 (?)
Template Usage (20):
• (3)bbcode_code_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates