How to Call Functions / Use Radio Buttons

Hello @markusvdm0

The equation’s structure is correct. You should enter it into the “Set equation” attribute in the settings of the calculated field. For the radio buttons, the solution would be similar, to know if a choice is checked or not, you should use a conditional statement, as you did with your equation, to check if the field is equal to the value.

Please, send me the link to the page where the form is inserted to check the equation in action.

Best regards.

Thanks for the quick reply. I got it to work now, is it possible that you can give me an example if-statement for radio buttons?

if fieldname12 == checked ?

Also, I am struggling very hard with the CSS of the CFF, do we always put #fbuilder in Infront of new CSS? I am trying to have a div with 2 columns, where the left column has an image and the right column has a Calculated field.

But for the life of me, I can’t get the Calculated Field to Vertically aligning with the image because it’s DIV is super small, and I can’t figure out how to get them to be equal size.

Also, can I add Jquery functions into the set equations? I want to for example when a user selects a specific package, turn certain elements black and white? I can’t share the form right now, as It’s not yet been published

Hello @markusvdm0,

Every choice in the radio buttons field has assigned a value. If you want to know if there is a choice in the fieldname12 is ticked, you can use the conditional statement below as part of the equation:

if(fieldname12)

Concerning the alignment, it depends on the image’s size, but I need to check the form in action to answer this question.

For the jQuery, if you assign a class name to a calculated field, for example: my-field and you want to set its color in black or white based on the equation’s result, it can be implemented similarly as follows:

(function(){
var result = fieldname1+fieldnam2;
if(result < 100) jQuery('.my-field input').css('color', 'black');
else jQuery('.my-field input').css('color', 'white');
return result;
})()

Note: the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords.”

Note 2: The previous equation is hypothetical, only to describe a possible solution.

Best regards.

Okay, we will get back to the jquery in a bit, for now, I need to understand how to do nested combinational logic:

`(function(){
if(fieldname3==”SHS”) {
switch(fieldname2){
case 200 && fieldname17:
return ‘$290.77’
break;
case 200 && NOT(fieldname17):
return ‘$243.77’
break;
}
}
})()

Also please feel free to look at the page here it’s all very WIP still:
https://staging.okrasolar.com/okra-shs/

Please feel free to give comment on how to align the calculated fields on the right with the center of the images on the left.

Also how can I style the Calculated field boxes.

Why does this not work?

Hello @markusvdm0

The equation’s structure is incorrect. In this case, the use of “switch” is unneeded. A better structure would be:

(function(){
    if(fieldname3=='SHS') 
    {
        if(fieldname2==200)
        {
            if(fieldname17) return 290.77;
            return 243.77;
        }
    }
})()

Concerning your second question, I don’t know the reason why you have created so many containers. However, I recommend you to assign a custom class name to the container fields you have inserted for rows, for example: my-row

And then enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

#fbuilder .my-row>div {
    display: flex;
    align-items: center;
}

Best regards.