Description
Makes a field required based on a radio button selection.
Requirements
- Have created a Radio Button Form Field with the options you need;
- Create a Javascript Form Field;
Instructions
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 Form Field will add a block of code similar to the HTML below, where radio_field_alias is the Radio button Form Field alias.
<div id="ce-cf-container-fieldId" class="ce-cf-container cf-type-fieldType">
<label class="cf-label requiredField" for="alias>fieldName</label>
<input id="radio_field_alias" class="inputbox required" name="radio_field_alias" type="text" value="" />
</div>
Usage
In the Javascript Form Field add this code below, just change field_alias1 and field_alias2 for the fields you want to make required and change the RADIO_FIELD_VALUE for the value you want from the radio button.
jQuery(document).ready(function($){ var fieldArray = ['field_alias1','field_alias2']; $( "input[name=radio_field_alias]" ).on( "change", function() {
$.each( fieldArray, function( index, value ) { if($(this).val() == 'RADIO_FIELD_VALUE'){ $('#'+value).addClass('required'); }else{ $('#'+value).removeClass('required'); } }); }); });
For CE 2.5.x and older versions
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/
Implementing:
- Add all fields that you will need;
- Add the javascript below to the Attributes field, change alias_1 and alias_2 for the field aliases that you want to make required, for example: var fieldArray = [field_alias_for_cf_10,field_alias_for_cf_11,field_alias_for_cf_12];
Attributes:
onchange="Recommend to a friend
var fieldArray = [alias_1,alias_2];
if(this.getProperty('value')== 'OPTION 1'){
fieldArray.each(function(item, index){
field = document.id(item);
field.addClass('required');
});
}else{
fieldArray.each(function(item, index){
field = document.id(item);
field.removeClass('required');
});
}"