This is not pretty especially if you have several fields refreshing and controlling other fields or texts. Also, this presents other problems because constant refreshing slows down your application.

So the use of Javascript DOM for hiding objects inside a DIV can prove useful if you would like that users be able complete a form without refreshing it from the get go.

object.style.display=value

Toggling this DOM property’s value to “none” would work the same way as a hide-when when you can create a function from it using the fields on your form. For my example below, I used a checkbox field to trigger the function and toggle the display property based on the value of the field.

Here is a simple demo in HTML. This is easier though to implement in Notes as you can just place the function in the onchange event of a field. You can also further develop the function if you are using multiple checkboxes  or if you have a more complex rule on hiding/displaying the fields.

Use, the following function on the onchange event of your checkbox:

toggledisplay(‘div id‘, ‘field id‘, ‘value you would like to check‘);

Here is the javascript function:

function toggledisplay(divname, checkfield, checkvalue)
{
var count=0;
var fdivname = document.getElementById(divname);
var fcheckfield = document.getElementsByName(checkfield);

for (var z = 0; z <fcheckfield.length;z++) {
if (fcheckfield[z].checked) {
if (fcheckfield[z].value == checkvalue) {count=1;}
}
}

if (count==1 )
{fdivname.style.display = “”;}
else
{fdivname.style.display = “none”;}
}