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

Embarking on the road less traveled

About Face 3As promised to myself (haha), I will try to further my knowledge on web usability as this an important cornerstone of application development especially with  apps that require a lot of user interaction.

Usability is so important the the US government has deemed appropriate to set up the site usability.gov as their primary source of information on user centric design. I have started perusing the resources on this site particularly the Guidelines on Research Based Design & Usability.

Also, I’ve started on an Alan Cooper book, About Face 3: The Essentials of Interaction Design. I’m not yet too far on the book and I will post more on the material once I get to finish it.

Down the road, I will probably push my manager to consider sponsoring me for a Human Factors International (HFI) series of seminars. Based on what I’ve read and heard, they are the premier training provider for software usability employing usability professionals and human behavior specialists. I’m also considering gunning for a Certified Usability Analyst (CUA) certification.

Whew, after reading all that, it seems like a lot of stuff to do. I think I will pace myself on all of this but will remain focused. I’m hoping to post updates in this category as I go along.