Jump to content

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


Recommended Posts

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>

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 1 year later...

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.

Link to post
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...