Details

Category: Customizing your forms

Also, before you try to create something a bit more advanced you have to understand how Contact Enhanced works, therefore I suggest you to create a form and test most of it's features before you continue; Also, please take a look at the online documentation.

Understanding the code:
Each Custom Field will add a block of code similar to the HTML below. Each block has a specific ID (ce-cf-container-fieldId), which we will use in the javascript, where fieldId is the custom field id.

<div id="ce-cf-container-fieldId" class="ce-cf-container cf-type-fieldType ce-fltwidth-100">
	<label class="cf-label requiredField" for="alias">fieldName</label> 
	<input id="alias" class="inputbox required" name="alias" type="text" value="" />
</div>

Usage

1. Add all fields that you will need and set the Parameter Hide field to Yes for all fields (fieldId) that you want to load hidden; (See option for degrading javascript gracefully)
2. Create the checkbox or radiobox like you would normally do; For the purposes of this tutorial we will use the Value below:
   Through organic searches in Google|Through ads in Google|Mouth to mouth|Other|Other search engine

Implementing for CE 3 and newer:

We'll use the jQuery (javascript) framework for this because it is teh default Javascript framework for Joomla 3, so in case you want understand the inner works and you are not familiar with jQuery (the default javascript framework in Joomla) you need to do some reading: https://jquery.com

• Add the javascript below to the Attributes field:

onchange="value = jQuery(this).val();
if(value=='Other' || value=='Other search engine' ){
  jQuery('#ce-cf-container-fieldId').css('display','block'); 
}else{
  jQuery('#ce-cf-container-fieldId').css('display','none'); 
}"

Implementing for CE 2.5:

We'll use the MooTools (javascript) framework for this, so in case you want understand the inner works and you are not familiar with MooTools (the default javascript framework in Joomla 2.5) you need to do some reading: https://docs.mootools.net/

• Add the javascript below to the Attributes field:

onchange="value = this.getProperty('value');
if(value=='Other' || value=='Other search engine' ){
  $('ce-cf-container-fieldId').setStyle('display','block'); 
}else{
  $('ce-cf-container-fieldId').setStyle('display','none'); 
}"

Graceful Degradation

"Graceful Degradation" is an important principle in Web design. It means that, when you put in features designed to take advantage of the latest and greatest features of newer browsers, you should do it in a way that older browsers, and browsers letting users disable particular features, can "step down" to a method that still allows access to the basic content of the site, though perhaps not as nice in appearance. If you want to allow users without javascript enabled to see the fields (without the show/hide effects of course), you will have to apply the changes below:

Change FIELD_ID for the Form Field ID, which can be found in the Form Field Manager.

In Joomla 3 and newer:

Use the Javascript Custom field type with the following content:

jQuery(document).ready(function($){
if($('#ce-cf-container-FIELD_ID1')){ 
$('#ce-cf-container-FIELD_ID1').css('display','none'); 
$('#ce-cf-container-FIELD_ID2').css('display','none'); 
$('#ce-cf-container-FIELD_ID3').css('display','none'); 
} 
});

In Joomla 2.5:

Use the Javascript Custom field type with the following content:

In Joomla 1.5:

Set the "Hide Field" CF (Custom Field) parameter to No and add the following script to the end of the js file (new line):
[Path to Joomla 1.5]/components/com_contact_enhanced/assets/js/validate.js

Recommend to a friend