Can't quite figure out how to hide an element on a details page

[Doolysw]

I am trying to hide an element on a details page, but I can't quite figure it out.  I have a yes or no field in my table and if the field is yes I want to display the element, and if the field is no, I want to hide the element.  I feel like I'm doing something wrong in either the way I'm setting the variable or the way I'm doing my if statement.  It could also be that the field is not passing a yes or no, but something else like a 1 and 0.  Could some one look at the code and help me out?  FIRE_PLAN is the yes or no variable in my table.  Right now it hides it no matter what the FIRE_PLAN field is set to.  Just FYI, FIRE_PLAN is a display only field which means I can't just set a rule to hide the element.

 

I have this in an html box on my details page

 

<div id="firesection"><a href="[@field:FIRE_PLAN_URL]"><img alt="" src="http://censoredurl.com/fire.png" style="width: 90px; height: 90px;" /></a><br />
View fire plan for this address</div>

In the footer I have the following code

 

<script>
   var fireplan =  document.getElementById("FIRE_PLAN");

if(fireplan == "Yes")
{
  document.getElementById('firesection').style.display = "block";
}
else
{
  document.getElementById('firesection').style.display = "none";
}
</script>

 

[Doolysw]

I updated the script a bit with some stuff I've read, but it still doesn't work.  New footer script below.

 

<script type= "text/javascript">
var fireplan= document.getElementById("FIRE_PLAN").value;
if (fireplan == "No")
{
document.getElementById("firesection").style.display = "none";
}

</script>

Any help would be most appreciated.

[SunakoChan]

Hi @Doolysw,

May I suggest to use conditional forms: https://howto.caspio.com/datapages/forms/conditional-forms/ to hide the fields on your DataPage.

A conditional form is a regular Caspio form with rules consisting of criteria and conditional actions. You can apply conditional rules to create dynamic change forms that fine tune fields based on user entries. In the Rules tab of the DataPage wizard, you can create various conditions to hide, show, require or disable specific fields based on the value or selection of other fields in the same form.

I hope this helps.

[Doolysw]

I've tried that, but all of the fields on my details page are display only, and conditional formatting rules do not work with display only fields unfortunately.

[SunakoChan]

Hi @Doolysw,

What I can suggest is make the field editable, so that you can use the conditional forms feature. 

Then on your header DataPage add this CSS code below:

<style>
.cbFormTextField{
pointer-events: none !important;
 border-color: transparent;
}

.cbBackButtonContainer{
display: none! important;
}
.cbFormFieldCell{
pointer-events: none !important;
}
</style>

The use of the code is to make the field not editable.

I hope this helps.

[GregL]

@Doolysw, I am having the same problem as you. Did you ever find a way to show/hide sections on a "display only" Details Datapage?

[AtayBalunbalunan]

Can you try the following code in your footer, Doolysw?

 

<script> 
var yesNoSpan = document.querySelector("td[data-cb-cell-name*='EditRecordFIRE_PLAN']").nextSibling.firstElementChild;

if (yesNoSpan.innerHTML == "No") {
 yesNoSpan.parentNode.parentNode.style.display = "none";
}
</script>

 

This is tested when the responsive option is disabled.