Calculating order totals on the fly

Lets consider a simple order entry form where users create order and order details on the same screen. It will be handy to calculate order totals on the fly to save them in 'total' field of 'Orders' table. Here is how it's going to look in generated application.



This is how this can be done in your project. Note that this approach is purely Javascript-based and will work exactly the same way in ASPRunner.NET/ASPRunnerPro applications.

1. Database structure



2. Javascript code that calculates totals

Create a text file named totals.js and save it in <output>/include folder. Paste the following code there:

function calcTotals() {
         var total=0;   
        $("tr[id*=gridRow]").each(function() {
                var id=$(this).attr('id');
                id = id.substring(7);
                t=+($("#value_price_"+id).val() * $("#value_quantity_"+id).val());
                        if (t>0) total+= t;
        });

        $("#value_total_1").val(total);
};

In this code we go through all details table rows, calculate total for each item and add it all together. Once done we assign the totals value to "total" field of master table.

If your database structure is different make sure to update field names like "price", "quantity" and "total".

3. Plug-in external Javascript file

Add the following code snippet to Orders table Add and Edit page. To do so switch to HTML mode, scroll to the end of the page and add code snippet in bold.

Quote

{$footer}
{END body}
<script type="text/javascript" src="include/totals.js">
</script>
</body>
</html>

Now we can use calcTotals() function in our code.

4. Make use of calcTotals function when price or quantity field changes.

To do so add the following code snippet to Javascript onload event of Add and Edit pages of "Order Totals" table.

var ctrlPrice = Runner.getControl(pageid, 'price');
var ctrlQuantity = Runner.getControl(pageid, 'quantity');
ctrlPrice.on('change keyup', function(e){ calcTotals(); } );
ctrlQuantity.on('change keyup', function(e){ calcTotals(); } );