Showing and hiding fields based on another field

This is not a new topic, but it does creep up in the forums from time to time. I thought it may be easier to write a blog entry on the topic.

So here is the scenario, you have a picklist (or any other field) and you want to show and hide other fields based on this. Let's say your picklist field is called "mypicklist" and you have two other fields, one is a text field called "mytextfield" and one is a lookup called "mylookup". The values in the picklist are "Show Text Field", with a value of 1 and "Show Lookup Field" with a value of 2. You want to show/hide the fields accordingly.

Firstly you need to write the following code in the mypicklist onChange event:

if (crmForm.all.mypicklist.DataValue == 1) //show text field
{
//hide the lookup
crmForm.all.mylookup.style.display = 'none';
crmForm.all.mylookup_c.style.display = 'none'; //note the _c
crmForm.all.mylookup_d.style.display = 'none'; //note the _d, only required for lookups

//show the text field
crmForm.all.mytextfield.style.display = 'inline';
crmForm.all.mytextfield_c.style.display = 'inline'; //note the _c
}
else if (crmForm.all.mypicklist.DataValue == 2) //show loookup
{
//hide the lookup
crmForm.all.mylookup.style.display = 'inline';
crmForm.all.mylookup_c.style.display = 'inline'; //note the _c
crmForm.all.mylookup_d.style.display = 'inline'; //note the _d, only required for lookups

//show the text field
crmForm.all.mytextfield.style.display = 'none';
crmForm.all.mytextfield_c.style.display = 'none'; //note the _c
}
else // hide all
{
//hide the lookup crmForm.all.mylookup.style.display = 'none';
crmForm.all.mylookup_c.style.display = 'none'; //note the _c
crmForm.all.mylookup_d.style.display = 'none'; //note the _d, only required for lookups

//show the text field
crmForm.all.mytextfield.style.display = 'none';
crmForm.all.mytextfield_c.style.display = 'none'; //note the _c
}

As you can see, each field has two (three for lookups) sections that has to be hidden, the first section is identified by the field schema name and represents the textbox area. The second, represented by the fieldname following by an "_c" represents the label area. Lookups also has an additional area, replresented by the fieldname followed by an "_d" which represents the lookup button. Each of these sections needs to be shown/hidden individually.

The second part is ensuring these are hidden/shown after they are saved, so the exact same code above needs to be placed in the form load event too. It may also make your life easier to create a global function in the onload event and then call this function from both within the onload event and the picklist onchange event. Something like:

ShowHideField = function()
{
//all the above code goes in here
}

// then call the above in both the onload and the relevent onchange event
ShowHideField();

The above goes for most field types and you can also show or hide fields based on whether they contain data or not with the following:

if (crmForm.all.mypicklist.DataValue != null) //show text field
{
...
}