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>
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
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'); }"
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/
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" 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:
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'); } }); |
In Joomla 2.5:
Use the Javascript Custom field type with the following content:
Code: |
window.addEvent('domready', function(){ |
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
Copyright © 2018 IdealExtensions.com. All Rights Reserved.