Jump to content
  • 0

Show or Hide a div based on virtual field in html block


DesiLogi
 Share

Question

Hi,

I have an html block in a Details page where I'm trying to show/hide a div based on the value of a Virtual field. The virtual field is set to Hidden and gets an Authentication value on load for data (a country name, in this case).

I can't quite get the show/hide to work. I've used this code before and it works well so there must be some syntax mistake in this example. Does anyone have an idea with that might be? Thanks!

<div id="section1">Print AUS Version</div>


<script>
  var v_virt = document.getElementByID("cbParamVirtual13").value;

if(v_virt=="Australia")
{
  document.getElementById('section1').style.display = "block";
}
else
{
  document.getElementById('section1').style.display = "none";
}
</script>

 

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Hi MayMusic,

Thanks for the tip- unfortunately I still can't get it to work. I checked to make sure the variable is reading the virtual field's value and it wasn't- so I changed it to document.getElementsByName("cbParamVirtual13")[0].value; and used an alert box to test it. Now it gets the virtual field value correctly so that's not an issue. 

I've used the code to show/hide a div before so I'm not sure what could be different here. The 'table' method didn't work either. Unfortunately I can't link to the page because it's heavily authenticated in the app. Maybe the quotes need to be singles? Not sure what to try...

Link to comment
Share on other sites

  • 0
On 3/2/2018 at 12:09 PM, DesiLogi said:

Hi MayMusic,

Thanks for the tip- unfortunately I still can't get it to work. I checked to make sure the variable is reading the virtual field's value and it wasn't- so I changed it to document.getElementsByName("cbParamVirtual13")[0].value; and used an alert box to test it. Now it gets the virtual field value correctly so that's not an issue. 

I've used the code to show/hide a div before so I'm not sure what could be different here. The 'table' method didn't work either. Unfortunately I can't link to the page because it's heavily authenticated in the app. Maybe the quotes need to be singles? Not sure what to try...

Hi DesiLogi,

Place this code in a HTML Block

<div id="section1">Print AUS Version</div>

Create Header/Footer then place this code in the Footer

<script>
window.onload = function(){
	var v_virt = document.getElementById('cbParamVirtual13').value;

	if(v_virt=="Australia") {
  		document.getElementById('section1').style.display = "block";
	}
	else {
  		document.getElementById('section1').style.display = "none";
	}
}
</script>

 

Link to comment
Share on other sites

  • 0

Hi Douvega- the variable was gotten correctly for Virtual13's value, even with the capital 'D'. I did overlook that and changed it to lowercase 'd' but it did not fix the issue. As I've said, the variable is correctly saved, it's the other code that's not working in terms of show/hide the div. 

Hi ThirdCharm- thanks for the code on this. Only issue is the window.onload doesn't work with Caspio's new deploy code.

Finally got this to work:  I had another html block with a div 'Section1' in it and that was blocking this code from working. Totally overlooked it- it's a complicated datapage. But the code is working now. Thanks all for your help on this, sometimes one just has to dig in further to find the solution and advice like this always helps. 

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
Answer this question...

×   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...
 Share

×
×
  • Create New...