Using the “onkeyup” event

Let’s add some interactivity to our customizations 🙂 For example, we have 4 fields: Amount (Schema Name amount, Type float(2)), Discount
(Schema Name discount, Type float(2)), Tax (Schema Name tax, Type float(2)) and Total Amount (Schema Name totalamount, Type float(2)) and we
want to calculate in real time the Total Amount based on the Amount, Discount and Tax.

First let’s consider the following formulas:
Tax = 1.19 * Amount
Discount – between 1 and 100 (percentage of Amount)
Total Amount = (100 – Discount)/100 * Amount + Tax

Second, we create the function that calculates the Total Amount on the basis of the other 3 and we type the following code on the OnLoad() event of a form which contains our fields:

function updateTotalAmount() {
var amount = crmForm.all.amount.DataValue;
var discount = crmForm.all.discount.DataValue;
var tax = crmForm.all.tax.DataValue;
var total;
tax = 0.19 * amount; //we assume that the tax represents 19% of the amount
total = (100 – discount) / 100 * amount + tax;
crmForm.all.tax.DataValue = tax;
crmForm.all.totalamount.DataValue = total;
}

And now, we attach an “onkeyup” event to the amount, discount and tax fields. The event will call our function, like this:

crmForm.all.amount.attachEvent(“onkeyup”,updateTotalAmount);
crmForm.all.tax.attachEvent(“onkeyup”,updateTotalAmount);
crmForm.all.discount.attachEvent(“onkeyup”,updateTotalAmount);

Now, we may test the interactivity of our form. Type a value for the Amount and Discount fields and you’ll see, in real time, how the Total Amount field updates.

Here’s a printscreen of our example: