javascript calculations for tabular inline insert and inline edit

[DesiLogi]

Hi,

Does anyone know how to use javascript to run calculations on a tabular report's results page, in inline insert and inline edit? 

I have code I run in the Details view to make a calculation when the user updates a field: 

document.addEventListener('DataPageReady', function (event) {
  
  var newmarkup = document.querySelector('[name*=EditRecordMarkUp]');

  newmarkup.onchange = function() {

var v_cost = document.getElementById("EditRecordCost").value;
var v_markup = document.getElementById("EditRecordMarkUp").value;

if(!isNaN(v_cost) && !isNaN(v_markup) && v_cost !=0 ){

var v_cprice = (Number(v_cost) * Number(v_markup)) + Number(v_cost);
document.getElementById("EditRecordPriceMarkedUp").value = v_cprice.toFixed(2);

}
}

});

This works great in the Details page, autofilling the field "PriceMarkedUp" when the user has entered a "Cost" and updates "Markup" value. The calculation is done for them. 

I also need to do this on the Tabular Results page, in Inline Insert for a new record and also Inline Edit for an update on the fly.  Is it possible to do this?  I guess you'd change "EditRecordMarkup" to "InlineEditMarkup" or "InlineInsertMarkup" but that doesn't seem to do it. Any suggestions would be great!

[SushiPizza]

Hi DesiLogi,

For the Inline inert, you can use:
"document.getElementById("InlineAddMarkup").value"

and for the inline edit, you would need to use:
"document.querySelector('[id*=InlineEditMarkup]').value "

For reference, you may check the Caspio JS guide:

Regards,

SP

[autonumber]

Hi @DesiLogi - You can also achieve this using Caspio's standard features and without using Javascript. You may use Calculated Field to re-create the formula you have on the Javascript. 

- https://howto.caspio.com/datapages/reports/advanced-reporting/calculations-in-forms-and-reports/

[DesiLogi]

Hi @autonumber- thanks for the tip but these fields need to be open to user input so I can't use a calculated field. I just want to autofill with a value and then if the user wants to override it they can. 

Hi @SushiPizza- thanks for posting--I'd missed the InlineEdit and InlineAdd syntax. I ended up piecing together some code that works for both the inline add and inline edit part, in case anyone else needs it--this goes in the footer of the Results page:

var nameOfField = "InlineAddMarkUp";
var nameOfField2 = "InlineAddCost";
var nameOfField3 = "InlineAddPriceMarkedUp";

var nameOfField4 = "InlineEditMarkUp";
var nameOfField5 = "InlineEditCost";
var nameOfField6 = "InlineEditPriceMarkedUp";

document.addEventListener('DOMSubtreeModified', function(){
  
            document.getElementsByName(nameOfField)[0].addEventListener('change', function(){

                var v_cost = document.getElementsByName(nameOfField2)[0].value;
                var v_markup = document.getElementsByName(nameOfField)[0].value;
                
               var v_cprice = (Number(v_cost) * Number(v_markup)) + Number(v_cost);
               document.getElementsByName(nameOfField3)[0].value = v_cprice.toFixed(2); 
            });     

 document.getElementsByName(nameOfField4)[0].addEventListener('change', function(){

                var v_cost2 = document.getElementsByName(nameOfField5)[0].value;
                var v_markup2 = document.getElementsByName(nameOfField4)[0].value;
                
               var v_cprice2 = (Number(v_cost2) * Number(v_markup2)) + Number(v_cost2);
               document.getElementsByName(nameOfField6)[0].value = v_cprice2.toFixed(2); 
            });     

});