Hiding div blocks using Javascript DOM and Checkboxes

CodeLotus Domino has a unique function to hide certain elements of a design element called “Hide-Whens”. Basically, this text option can be set to hide a field, text or code based on a formula. But, if you plan on using this on the web and would like it to be triggered by a field change event, more than likely you will need to refresh the entire form so the hide-whens will take effect.

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”;}
}

Speak Your Mind

*