Run basic math in real time on a form using JavaScript

[Chem]

Basic formulas work great but sometimes, you’ll want to display a simple calculation on the form in real-time.

Here’s an example of how this could look using some HTML inside a form and JavaScript. In the GIF below, we are multiplying Amount by Quantity and displaying the result above the save button.

First, we’ll need to add the following to the HTML source code inside a Form Component

<p id="total">$0.00</p>

Next, you’ll need to add some classes to each field you would like to include in the calculation. For my example, I’ve added a class called “math-input” to both the Amount and Quantity and then a unique class “amount” and “quantity” for each field. So the CSS Class setting under Design for the Amount field is “math-input amount” and the Quantity field CSS Class setting is set to “math-input quantity” as shown in the image below.

Next, we need to find the Component ID since we are using the Tadabase JavaScript API. This can be found by hovering over the info icon in the Page Builder

Finally, we’ll add the JavaScript Code to the JavaScript section of the page. (Make sure you remember to update component_3, amount, quantity, total and math-input to your unique input values

TB.render('component_3',function(){
    var calculateAndUpdateDom = function(){
        var amountInput = $('.amount input').val();
        var quantityAmount = $('.quantity input').val();
        var calc = amountInput * quantityAmount;
        $('#total').html('$'+calc);
    };
    $('.math-input').keyup(function(){
        calculateAndUpdateDom();
    });
});

[wescar]

Answers all kinds of questions.

[WilliamPorter]

Just saw this. Thanks, Moe. As @wescar says, this answers lots of questions.

I’m curious: If you store the field IDs, then the script won’t break if the field display names change, will it?

[Eli]

@Chem let me know if there’s a way to calculate in the Assigned Value from a Select field into this instant calculator. Thank you sir!

[Chem]

Hey @Eli

Here’s how that would look.

You can follow all of the above steps except for the JavaScript code at the end.

Expand to view the first steps

@Chem

First, we’ll need to add the following to the HTML source code inside a Form Component

<p id="total">$0.00</p>

Next, you’ll need to add some classes to each field you would like to include in the calculation. For my example, I’ve added a class called “math-input” to both the Amount and Quantity and then a unique class “amount” and “quantity” for each field. So the CSS Class setting under Design for the Amount field is “math-input amount” and the Quantity field CSS Class setting is set to “math-input quantity” as shown in the image below.

Next, we need to find the Component ID since we are using the Tadabase JavaScript API. This can be found by hovering over the info icon in the Page Builder

---

The updated JavaScript for a Select field is as follows

TB.render('component_3',function(){
    function numberWithCommas(x) {
        var parts = x.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }
    var calculateAndUpdateDom = function(){
        var amountInput = $('.amount input').val();
        var quantityAmount = $('.quantity select').val();
        var calc = amountInput * quantityAmount;
        
        $('#total').html('$'+numberWithCommas(parseFloat(calc).toFixed(2)));
    };
    $('.math-input').on('keyup change', function(){
        calculateAndUpdateDom();
    });
});

Note: This can be done with a Select field that has Score Values assigned or a Select field that has numbers as options

[Eli]

Amazing! Really appreciate the assist!

[brettlewis]

Hi @Chem,
Thanks or the example.
I have a use case to use checkboxes.
For example, an ‘Include VAT’ checkbox that causes 20% to be added to the total.
Any chance you could expand your example to show how that could be achieved?

Thanks, Brett.

[Chem]

Hey @brettlewis, sure! So that would look like this.

Here are the expansion pack instructions.

1. Add a Decision Box field and add the CSS Classes math-input include-vat
   

   

2. Add the following to the code

    if($('.include-vat input')[0].checked){
        calc = calc * 1.2;
    }
   

So the result in my example looks like this.

TB.render('component_3',function(){
    var calculateAndUpdateDom = function(){
        var amountInput = $('.amount input').val();
        var quantityAmount = $('.quantity input').val();
        var calc = amountInput * quantityAmount;
        if($('.include-vat input')[0].checked){
            calc = calc * 1.2;
        }
        $('#total').html('$'+calc);
    };
    $('.math-input').on('keyup change',function(){
        calculateAndUpdateDom();
    });
});

[brettlewis]

Awesome, thanks, @chem.

Much appreciated.

[Chem]

If you’re looking for a way to do this with connected Number values, for example, a connected Number that will be the quantity, you can use the following.

You can follow all of the above steps except you’ll be adding a Connected Field and updating the JavaScript code at the end.

Here’s how it will look.

Expand to view the first steps

@Chem

First, we’ll need to add the following to the HTML source code inside a Form Component

<p id="total">$0.00</p>

Next, you’ll need to add some classes to each field you would like to include in the calculation. For my example, I’ve added a class called “math-input” to both the Amount and Quantity and then a unique class “amount” and “quantity” for each field. So the CSS Class setting under Design for the Amount field is “math-input amount” and the Quantity field CSS Class setting is set to “math-input quantity” as shown in the image below.

Next, we need to find the Component ID since we are using the Tadabase JavaScript API. This can be found by hovering over the info icon in the Page Builder

---

The updated JavaScript for a Connected field is as follows

TB.render('component_ID',function(){
    var calculateAndUpdateDom = function(){
        var amountInput = $('.amount input').val();
        var quantityAmount = $('.quantity af-data-table-field').html();
        var calc = amountInput * quantityAmount;
        $('#total').html('$'+calc);
    };
    $('.math-input').keyup(function(){
        calculateAndUpdateDom();
    }).bind('DOMSubtreeModified', function(){
      calculateAndUpdateDom();
    });
});

Note: If the connected value is a Currency field, you’ll need to update the 4th line to the following

var quantityAmount = $('.quantity af-data-table-field span').html();

[Peter]

@Chem I am stuck here.
I try to read out a value of a date-field and then to add some time to it, and get it displayed on the form.

var dateInput = $(’.date-input input’).val();

Is that correct? Does the val() work, or do I need to initialize first the
var dateInput = new Date()

[GREDDIE]

Thanks this is exactly what I needed and the examples work perfectly.

[GREDDIE]

Hi all / @Chem Is it possible to place a calculated (calculated in realtime in the Javascript on the Form) value into a forms field value or straight into the records database it doesn’t necessarily have to be displayed on the form.

In this example I’m changing the quantity and the calculated value shown in blue is correct and should update the tables field.

Vidyard Recording?

Any pointers gratefully received
Thanks
Graham

[Chem]

Hey @GREDDIE,

Thanks for sending that video! I understand what you want, and it would be so cool to have, but at this time, you’ll need to submit the form to update the database fields.

[GREDDIE]

okay thanks for confirming. I cut and paste the Javascript calculation in the form into a Pipe and then got a database rule to execute it. It means I’ve duplicated code but it’s working fine.

[slimpens]

@Chem

Great tool, but is it also possible to show the dot which represenets the thousand marker? (e.g. in Europe it’s a dot, in the USA a comma).

Look at the picture.

[slimpens]

Set "inputmode" on a currency field to "decimal"?

I want to add how to use the escapeChar option. Let’s say, for example, you want the phone number to have a prefix (0197) that is uneditable, and then the user can enter the rest of the number following a specific number pattern (99 999 999 9). Working Demo: https://tutorials.tadabase.io/input-mask/demo-phone-number To do this, you can follow steps 1, 2, and 3 above and then add the following code to the JavaScript.

Click here to see steps 1, 2, and 3 from the post above

Javascript Code TB.…

[Chem]

Set "inputmode" on a currency field to "decimal"?

@slimpens here’s how you can combine the two. [image] TB.render('component_ID',function(data){ var calculateAndUpdateDom = function(){ var amountInput = $('.amount input').val(); var quantityAmount = $('.quantity input').val(); var calc = amountInput * quantityAmount; $('#total').html('€'+Number(calc).toLocaleString("es-ES", {minimumFractionDigits: 2})); }; $('.math-input').keyup(function(){ calculateAndUpdateDom(); }); data.ele.find…

[slimpens]

@Chem
Great work thanks a lot Chem!

[SWalker]

@Chem

DOMSubtreeModified

It looks like the connector version of this script no longer works as DOMSubtreeModified is depricated.