Jump to content

Perform Calculations in Submission form

Recommended Posts

Hi NeoInJS,

Let's assume that:

  1. The price field is named Price in the source table and in the submission DataPage.
  2. The quantity field is named Qty  in the source table and in the submission DataPage.
  3. The total field is a virtual field named Virtual1 and has its Form Element set to Display Only.

Under these assumptions, please create another HTML block and add this code snippet to that block with Source button enabled: 

<script type="text/javascript">
    // Caspio form elements
    var priceField = document.getElementById('InsertRecordPrice');
    var qtyField   = document.getElementById('InsertRecordQty');
    var totalField = document.getElementsByClassName('cbFormData')[0];
    var caspioForm = document.getElementById('caspioform');

    // Event handler
    var calculateTotal = function (event)
        // TODO: Do something on value change -->
        totalField.innerHTML = priceField.value * qtyField.value;

    // Run total calculation on input to any of these two fields
    priceField.addEventListener('input', calculateTotal);
    qtyField.addEventListener('input', calculateTotal);


Link to comment
Share on other sites

  • 1 year later...

Hi NeoInJS,

I have one example of code which is working for 4 text fields. So you can input values there and you will get a result which you need. This result will change dynamically without reloading page.You can adjust this code for your own needs.




function calculate () {

   this.init = function(){
      var input = $('.result_div');
      var val1 = $('#InsertRecordVal1');
      var val2 = $('#InsertRecordVal2');
      var val3 = $('#InsertRecordVal3');
      var val4 = $('#InsertRecordVal4');
      var my_this = this;
      input.on('keypress', function(evt) {
       var theEvent = evt || window.event;
     var key = theEvent.keyCode || theEvent.which;
     key = String.fromCharCode( key );
     var regex = /[0-9]|\./;
     if( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();

      val1.on('input', function() {
        $(this).val().replace(/\D/g, '');
         val1 = $( this ).val();
         my_this.val1 = val1;

      val2.change(function() {
         val2 = $( this ).val();
         my_this.val2 = val2;

      val3.change(function() {
         val3 = $( this ).val();
         my_this.val3 = val3;

      val4.change(function() {
         val4 = $( this ).val();
         my_this.val4 = val4;

 this.update = function () {
   if (this.val1 && this.val2 && this.val3 && this.val4) {
   //here is something for to do
        var res = +this.val1 + +this.val2 + +this.val3 + +this.val4;
        $("#result_div").html( "<p>"  + res + "</p>" );


$( document ).ready(function() {

new calculate().init();



Also see two attached files with setting up process of fields and result field.



Link to comment
Share on other sites

  • 1 month later...

I have a form with the following fields which I would like to add a formula field to.  This formula would be based on three fields:


Basically:  Cost price + mark-up x qty.=sub total

I have a total of 30 of these lines to calculate on a submission datapage.

I contacted Caspio support who referred me more that once to the examples provided above as solutions.  I have tried them but I have zero coding knowledge & even after changing the field names as I though necessary, could not get them to work.


I would really appreciate any assistance with this problem.

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...