Display a field if no other fields are shown

Hello @rocketpig3

You can do it with only one calculated field instead of using three. That would give you more control about the elements to display or hide.

For example, assuming you have three slider fields, fieldname1, fieldname2, and fieldname3, and the corresponding HTML content fields to display or hide the fieldname4, fieldname5, and fieldname6, and the HTML field to display when no other are visible the fieldname7.

Now, I’ll assume your current equations are:

For the first calculated field: fieldname10+fieldname11. If the result is greater than 20, display the HTML Content field fieldname4.

For the second calculated field: fieldname20*fieldname25. If the value is less than 100, display the HTML Content field fieldname5.

For the third calculated field: fieldname18+fieldname14 and if the value is equal to 15 display the HTML Content field fieldname6.

If none of the previous HTML Content fields are visible, display the HTML Content field fieldname7.

These equations and fields’ names are hypothetical. I selected them only to describe the process.

Now, I’ll implement the process with a unique calculated field, including to display the fieldname7 field if the previous HTML Content fields are not visible:

(function(){
  let display_7 = true;
  let slider1 = fieldname10+fieldname11;
  let slider2 = fieldname20*fieldname25;
  let slider3 = fieldname18+fieldname14;
  
  HIDEFIELD(fieldname4|n);
  HIDEFIELD(fieldname5|n);
  HIDEFIELD(fieldname6|n);
  HIDEFIELD(fieldname7|n);

  getField(fieldname1|n).setVal(slider1);
  getField(fieldname2|n).setVal(slider2);
  getField(fieldname3|n).setVal(slider3);

  if(20<slider1){
    SHOWFIELD(fieldname4|n);
    display_7 = false;
  } 
  
  if(slider2<100){
    SHOWFIELD(fieldname5|n);
    display_7 = false;
  } 
  
  if(slider3==15){
    SHOWFIELD(fieldname6|n);
    display_7 = false;
  } 
    
  if(display_7){SHOWFIELD(fieldname7|n);}
})()

Best regards.

Thanks. Just so I understand, this hypothetical code should be in the Equation of a new calculated field? Is this the only calculated field?

Hello @rocketpig3

The hypothetical code allows you to pass from three calculated fields to only one and include the behavior of displaying the extra “HTML Content” field if the other three are hidden.

Best regards.

Where should the code (once edited to account for the specific fields I’m using) be pasted?

Hello @rocketpig3

You should enter the code in the “Set equation” attribute of a calculated field in the form.

Best regards.

I have translated this into what I thnk should work for my form:

(function(){
  let display_40 = true;
  let slider1 = fieldname21-40*((fieldname3+fieldname4)-1);
  let slider2 = fieldname25-40*((fieldname3+fieldname4)-1);
  let slider3 = fieldname7-3*((fieldname3+fieldname4)-1);
  let slider4 = fieldname13-100*((fieldname3+fieldname4)-1);
  let slider5 = fieldname38-100*((fieldname3+fieldname4)-1);
  let slider6 = fieldname17-25*((fieldname3+fieldname4)-1);
  let slider7 = fieldname19-70*((fieldname3+fieldname4)-1);
  
  HIDEFIELD(fieldname28|n);
  HIDEFIELD(fieldname29|n);
  HIDEFIELD(fieldname10|n);
  HIDEFIELD(fieldname30|n);
  HIDEFIELD(fieldname32|n);
  HIDEFIELD(fieldname31|n);
  HIDEFIELD(fieldname33|n);

  getField(fieldname21|n).setVal(slider1);
  getField(fieldname25|n).setVal(slider2);
  getField(fieldname7|n).setVal(slider3);
  getField(fieldname13|n).setVal(slider4);
  getField(fieldname38|n).setVal(slider5);
  getField(fieldname17|n).setVal(slider6);
  getField(fieldname19|n).setVal(slider7);

  if(slider1>89){
    SHOWFIELD(fieldname28|n);
    display_40 = false;
  } 
  
  if(slider2>79){
    SHOWFIELD(fieldname29|n);
    display_40 = false;
  } 
  
  if(slider3>30){
    SHOWFIELD(fieldname10|n);
    display_40 = false;
  }
  
  if(slider4>540){
    SHOWFIELD(fieldname30|n);
    display_40 = false;
  } 
  
  if(slider5>175){
    SHOWFIELD(fieldname32|n);
    display_40 = false;
  } 
  
  if(slider6>25){
    SHOWFIELD(fieldname31|n);
    display_40 = false;
  } 
  
  if(slider7>70){
    SHOWFIELD(fieldname33|n);
    display_40 = false;
  }
    
  if(display_40){SHOWFIELD(fieldname40|n);}
})()

I then put this in a calculated field equation and removed all other equations from other calculated fields. However now whenever I preview the form. including in its cff URL, the page is not responsive (cannot move sliders) and eventually the tab crashes. Can’t open the console to see jS errors. Is there a circular reference or something I have included?

Thanks

Hello @rocketpig3

Yes, you have created a circular reference. Your equation uses the fieldname7, fieldname21, fieldname29 fields to calculate the slider values, and assign the calculated values to them again. So, the assignments throws the equation.

To avoid this behavior, please, replace the piece of code:

  getField(fieldname21|n).setVal(slider1);
  getField(fieldname25|n).setVal(slider2);
  getField(fieldname7|n).setVal(slider3);
  getField(fieldname13|n).setVal(slider4);
  getField(fieldname38|n).setVal(slider5);
  getField(fieldname17|n).setVal(slider6);
  getField(fieldname19|n).setVal(slider7);

as follows:

  getField(fieldname21|n).setVal(slider1, true);
  getField(fieldname25|n).setVal(slider2, true);
  getField(fieldname7|n).setVal(slider3, true);
  getField(fieldname13|n).setVal(slider4, true);
  getField(fieldname38|n).setVal(slider5, true);
  getField(fieldname17|n).setVal(slider6, true);
  getField(fieldname19|n).setVal(slider7, true);

Passing true as the second parameter of the setVal method silences the onchange event.

Best regards.

Thanks, the form now works. However the sliders now begin with negative values – they should start at zero. Also, when dragging the slider to the right, it then jumps back about 10-20 units when the mouse is released.

Hello @rocketpig3

In your current equation, every time you change the value of a slider, the equation modifies the same value by coding, causing the malfunctions you mention.

Therefore, if implementing all processes in a single equation creates circular references, this alternative would not be a solution for you.

If you prefer to revert to the previous implementation, but show the “HTML Content” field fieldname40 only if the other “HTML Content” fields are hidden. You can insert an additional calculated field in the form and enter an equation similar to

(function(){
  let fields = [fieldname21,fieldname3,fieldname4,fieldname25,fieldname7,fieldname13,fieldname38,fieldname17,fieldname19];
  let html_fields = [fieldname28|n,fieldname29|n,fieldname10|n,fieldname30|n,fieldname32|n,fieldname31|n,fieldname33|n];

  for(let i in html_fields){
    if(getField(html_fields[i]).jQueryRef().is(':visible')){
        HIDEFIELD(fieldname40|n);
        return;
    }
  }
  SHOWFIELD(fieldname40|n);
})()

Best regards.