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 its features before you continue; Also, please take a look at the online documentation.
Understanding Contact Enhanced code for Joomla 4.x:
Each Form Field will add a block of code similar to the HTML below. Each block represented by the <div> tag has a specific ID (ce-ff-container-ALIAS), which we will use in the javascript, where ALIAS is the form field alias.
<div id="ce-ff-container-ALIAS" class="control-group ce-ff-container ce-ff-type-text"> [...] </div>
For Radio buttons:
jQuery(function($){ $('#ce-ff-container-RADIO_ALIAS input').on('change', function(){ var value = $(this).val(); if(value == 'Other' || value == 'Other search engine' ){ $('#ce-ff-container-ALIAS').css('display','block'); }else{ $('#ce-ff-container-ALIAS').css('display','none'); } }); });
For Checkboxes:
jQuery(function($){ $('#ce-ff-container-CHECKBOX_ALIAS input').on('change', function(){ if($(this).val() == 'Other' && $(this).is(':checked') ){ $('#ce-ff-container-ALIAS').css('display','block'); }else{ $('#ce-ff-container-ALIAS').css('display','none'); } }); });
For Select Lists:
jQuery(function($){ $('#ce-ff-container-SELECT_ALIAS select').on('change', function(){ if($(this).val() == 'Other' ){ $('#ce-ff-container-ALIAS').css('display','block'); }else{ $('#ce-ff-container-ALIAS').css('display','none'); } }); });
Understanding Contact Enhanced code for Joomla 3.x:
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>
We'll use the jQuery (javascript) framework for this because it is the default Javascript framework for Joomla 3, so in case you want to 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
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'); }"
"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.x:
Use the Javascript Custom field type with the following content:
Code: |
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'); } }); |