Articles

How to display a hidden field when the user clicks on a specific checkbox OR radiobox?

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) you need to do some reading: http://docs.mootools.net/
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:
http://ideal.fok.com.br/joomla-extensions/component-contact-enhanced/documentation.html

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>

Implementing:

  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
  3. 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:

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

In Joomla 2.5 and newer:

Use the Javascript Custom field type with the following content:

Code:

window.addEvent('domready'function(){ 
if($('ce-cf-container-FIELD_ID1')){ 
$('ce-cf-container-FIELD_ID1').setStyle('display','none'); 
$('ce-cf-container-FIELD_ID2').setStyle('display','none'); 
$('ce-cf-container-FIELD_ID3').setStyle('display','none'); 

});


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

Newsletter

captcha

Connect with us

We're on Social Networks. Follow us & get in touch.
You are here: Start page