www.webdeveloper.com
Results 1 to 6 of 6

Thread: Live Javascript calculating

  1. #1
    Join Date
    Apr 2010
    Posts
    5

    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>

  2. #2
    Join Date
    Sep 2009
    Location
    Seribia/Smederevo
    Posts
    13

    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>

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>

  4. #4
    Join Date
    Apr 2010
    Posts
    5
    @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.

  5. #5
    Join Date
    Apr 2010
    Posts
    5
    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!

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    In Javascript it would be 4500.00 Regular Expressions can be used to solve the issue

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles