Show/Hide Fields With JavaScript

Posted on Updated on

Intro

When customizing forms in CRM, one of the most commonly used and simplest things to do is a hide a field on the form.  This may be hiding one or numerous fields on the form.  Often times, developers may need to use several “hidden” fields for other purposes.  In this case, he/she could place all those fields in a section on the form, and then hide the section.

Hiding A Field
To hide a field use the following code snippet:

crmForm.all.<insert schema name of field>_c.style.visibility = ‘hidden’;
crmForm.all.<insert schema name of field>_d.style.visibility = ‘hidden’;

OR

crmForm.all.<insert schema name of field>_c.style.display = ‘none’;
crmForm.all.<insert schema name of field>_d.style.display = ‘none’;

You will have to hide both the “_c” and “_d” parts of the field.  The “_c” appended to the field is the label of the field, and “_d” is the data contained in the field.

Un-hiding A Field
To un-hide a field, use the following code snippet:

crmForm.all.<insert schema name of field>_c.style.visibility = ‘visible’;
crmForm.all.<insert schema name of field>_d.style.visibility = ‘visible’;

OR

crmForm.all.<insert schema name of field>_c.style.display = ‘block’;
crmForm.all.<insert schema name of field>_d.style.display = ‘block’;

Hiding A Section
To hide a section (which will in turn, hide all fields in that section), use the code snippet below:

crmForm.all.<insert schema name here>.parentElement.parentElement.parentElement.style.display = ‘none';

Un-hiding A Section
To un-hide a section, use the code snippet below:

crmForm.all.<insert schema name here>.parentElement.parentElement.parentElement.style.display = ‘block';

As you can see, one can use both the “style.display” and “style.visibility” calls to hide fields.  There is a difference, depending on what you want to do.  The “style.visiblity” call makes the element visible or hidden, but it is still rendered on the page, and takes up space on the page even if you can’t see it.  If you set “style.display” to “none” the markup is not processed and does not take up space on the page.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s