Articles

How to make required fields based on a radiobox selection?

This is a reply to this post.

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 and where alias is the custom field alias.

<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;
  2. In the Radiobox value add the values separated by | (pipe) like this: OPTION 1|Option 2|Option 3
  3. 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="
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');
});
}"

Newsletter

captcha

Connect with us

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