Calculate field in Datapage, getElementByClassname

[satch]

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>

[Aurora]

Hi Satch, 

 

You can take a Virtual Field by ID as well : 

 

document.getElementById("cbParamVirtual1"). 

 

There is a similar script here: 

 

http://forums.caspio.com/index.php?/topic/3149-js-perform-a-calculation-on-values-entered-in-a-webform/

 

[satch]

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>

[MayMusic]

Check the console and see what error you are receiving. 

[satch]

13 minutes ago, MayMusic said:

Check the console and see what error you are receiving. 

Which console do you pointing to??

 

[MayMusic]

Press F12 it will open developer tools, click on Console tab and run the page you should be seeing the error messages

[MayMusic]

https://developer.chrome.com/devtools

http://getfirebug.com/

[satch]

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

[satch]

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?