Can you hide an HTML block with a rule?

[roattw]

I want to include an HTML reminder text on a form when a specific field on a form is a certain value.  Hint/Tip not what I want since its hidden unless licked.  I want some RED text to appear is form field = X.  I can get the text to display on form with HTML block.  But using Rule Conditions I cant choose to hide the HTML block, only actual fields.

Way to apply rule/condition to an HTML block?

[douvega]

I just came with another idea that should work, this is by using your current HTML block content.

1. Create a section for these two elements, Specific LSN time: and your HTML block Message.
2. Go to Rules in your Datapage and create a new Rule. If the radio is not equal to Specific, then hide the section that contains the field and the HTML Block

That would be pretty straight forward. You can learn more about this way in this article

Hope it helps.

[douvega]

Dear roattw,

Please replace your current HTML block for the following code:

<div id="msg24"></div>
<script>
var radioField = document.getElementsByName('InsertRecordLSN_time');
var messageCnt = document.getElementById('msg24');
function getRadioValue(){
	for (var i = 0, length = radioField.length; i < length; i++) {
		if (radioField[i].checked) {
			return radioField[i].value;
			break;
		}
	}
}

for (var i = 0, length = radioField.length; i < length; i++) {
	radioField[i].onchange = function(){
		if(getRadioValue() == 'Specific'){
			messageCnt.innerHTML = '<span class="cbInfoText">*24-hour clock</span>';
		} else {
			messageCnt.innerHTML = '';
		}
	}
}
</script>

Let us know whether or not it works.

[douvega]

Hi there,

Please take a look at this post where we could resolve a conditional displaying issue in a datapage. Try to follow it but if you are not able to accomplish it, do not hesitate to ask. If possible, post the code you are using so we can debug it easier.

Hope it helps.

[roattw]

Thanks Douvage

With my fledgling JS skills I have a question.  The example with showing/hiding images makes sense, but what is the function to show nothing?  Im my case if a field (LSN_time) contains the a specific radial button choice (Specific), then show HTML Block 2.  Other wise hide it.  This isnt working, presumably because of incorrect naming of the HTML Block.

 

<div id="LSNTime"></div>
<script>
var linkDiv = document.getElementById("LSNTime");
var  = 'HTML Block 2';

if('[@LSN_time]' == 'Specific'){
linkDiv.innerHTML = HTML Block 2;
} else {
linkDiv.innerHTML = none;
}
</script>

[douvega]

You are pretty close to get it. You may not be able to manipulate the HTML block from the Caspio Datapage, instead, your variable must contain the HTML code.

Let me give you a sample code:

<div id="LSNTime"></div>
<script>
var linkDiv = document.getElementById("LSNTime");
var content = '<p id="uniqueParagraph">This is the content that will show </p><a class="btn btn-success" href="#">Sample Link</a>';

if('FieldReference' == 'Specific'){
linkDiv.innerHTML = content;
}
</script>

Make sure you do good usage of single or double quotation marks. If you dont want to show anything, then the else statement is not needed.

Also, be careful when assigning the Field Reference, use the dropdown in the HTML block that contains all your fields to avoid typos.

Let us know whether or not you were able to accomplish it.

[roattw]

Thanks for the reply!  Probably not the best example as I dont need a button href link to cause anything.  I just need an HTML importan tnote field to appear (HTML block) is a value is selected.  The suggested code had an effect, it didnt show the red important note field at all so close.

Currently it looks like this.  *24-hour clock shows all the time (HTML block), need selective appearance.

If  SPECIFIC selected here a field for "Specific LSN time" appears.  That's where we need the reminder to use 24 hour clock. Doesn't need to be there until then.:

The code had effect when placed in the HTML field, it prevented the block from appearing at all regardless of "Specific selection".

Still no Red Note HTML text.

Not sure if that HREF button or other call is needed to make run the change.  This one needs to just be on select.  In your example does the <P> ID uniqueParagraph need to to match of be noted somewhere else?

[douvega]

No, ID of <p> what just an example of quotation usage and how the HTML should be written in the variable. To provide you a definite solution, I would like to ask you to share your Datapage here as you have it right now so I can inspect it.

[roattw]

Thanks douvega. The link is   https://c3ebv137.caspio.com/dp.asp?AppKey=3f2d400023038023adc84db3bd83

[roattw]

Wow.  Both work well.  Thank you!  The script version was very educational - I can see why it works and where mine was off.  The rule for hding the section is very elegant.  And proof that I tend to over think things.  I think this topic and solution will help other.  Thanks again.