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 comment
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 comment
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 comment
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 comment
Share on other sites

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.

Guest
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.

Loading...
×
×
  • Create New...