Perform Calculations in Submission form

[NeoInJS]

Hello,

I have a submission form with 3 fields - Price, Qty and Total Amount. May you please help me in developing a script to get the Total Amount when Price or Qty is changed. (without submitting the dp)

The formula for Total Amount. is Price * Qty. Thanks in advance.

[nightowl]

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);
</script>

 

[Andrii]

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.

 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>

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;
         my_this.update();
      });

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

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

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

   }
  
   
 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();

});

</script>

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

[cdutoit62]

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:

([@a1_SUPPLIER_PRICE_PART_1]*(1+([@a1__MARK_UP_PART_1]/100)))*[@a1_PART_AMOUNT_1]

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.

[LunaLovegood]

Hello @cdutoit62,

 

With the release 13.0, you can now perform a calculation in Submission Form without inserting complex JS.

 

 

You can check this article as well: https://howto.caspio.com/release-notes/caspio-bridge-13-0/

 

Regards,

LunaLovegood of St. Catchpole 

[cdutoit62]

Thanks LunaLovegood.  Will definitely give it a try.  Very glad for the latest update.