Jump to content

Calculate field in Datapage, getElementByClassname


Recommended Posts

Hi,

I'l looking for a way to calculate a field after 3 fields are entered.

The fields are: OP_Length, OP_Width, OP_Height.

I put a virtual field on the form, named Virtual2, label Volume Calculated, display only

Volume = length * width  * height

Searching here i came to the following, but cannot get it to work.

Is that because the Virtual field is not referenced to with the right parameter: getElementsByClassName('cbFormData')[0]; ?

<script type="text/javascript">
    // Caspio form elements
    var length = document.getElementById('InsertRecordOP_Length');
    var width   = document.getElementById('InsertRecordOP_Width');
    var height   = document.getElementById('InsertRecordOP_Height');

    var volume = document.getElementsByClassName('cbFormData')[0];
     var caspioForm = document.getElementById('caspioform');

    // Event handler
    var calculateVolume = function (event)
    {
        // TODO: Do something on value change -->
        volume = length.value * width.value * height.value;
    }

    // Run total calculation on input to any of these two fields
    length.addEventListener('input', calculateVolume);
    width.addEventListener('input', calculateVolume);
    height.addEventListener('input', calculateVolume);
</script>

Link to post
Share on other sites

Hi Aurora, tried this also but didn't work :(

I have put this script as last in the footer:

type="text/javascript">
    // Caspio form elements
    var length = document.getElementById('InsertRecordOP_Length');
    var width   = document.getElementById('InsertRecordOP_Width');
    var height   = document.getElementById('InsertRecordOP_Height');
var volume   = document.getElementById("cbParamVirtual2");
    

    // Event handler
    var calculateVolume = function (event)
    {
        // TODO: Do something on value change -->
        volume = length.value * width.value * height.value;
    }

    // Run total calculation on input to any of these three fields
    length.addEventListener('input', calculateVolume);
    width.addEventListener('input', calculateVolume);
    height.addEventListener('input', calculateVolume);
</script>

Link to post
Share on other sites

Hi MayMusic,

In the console it only gives a warning about: mixed content (requesting an insecure image over https0

Another thing.

I have placed the script in the footer. And also tried it in a separate HTML block. Same results however.

Does that matter where it's placed?

 

This is the script as I read it in the console now:

 


    // Caspio form elements
    var length = document.getElementById('InsertRecordOP_Length');
    var width   = document.getElementById('InsertRecordOP_Width');
    var height   = document.getElementById('InsertRecordOP_Height');
var volume   = document.getElementById("cbParamVirtual2");
    

    // Event handler
    var calculateVolume = function (event)
    {
        // TODO: Do something on value change -->
        volume = length.value * width.value * height.value;
    }

    // Run total calculation on input to any of these three fields
    length.addEventListener('input', calculateVolume);
    width.addEventListener('input', calculateVolume);
    height.addEventListener('input', calculateVolume);

Link to post
Share on other sites

Dived a bit more in debugging this.

Have put in the script:

console.log(volume);
console.log(length);

When the page loads, volume has value of null

After populating the length, width or height fields, the value of volume doesn't change....

Will the console be refreshed after I fill in the fields?

It seems the addEventListener doesn't work?

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...