Contact Enhanced Documentation

Description

Makes a field required based on a radio button selection.

Requirements

  1. Have created a Radio Button Form Field with the options you need;
  2. 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:

  1. Add all fields that you will need;
  2. 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');
});
}"
Recommend to a friend

Copyright © 2018 IdealExtensions.com. All Rights Reserved.

This site is not affiliated with or endorsed by the Joomla!™ Project. It is not supported or warranted by the Joomla!™ Project or Open Source Matters™. The Joomla!™ logo is used under a limited license granted by Open Source Matters™, the trademark holder in the United States and other countries.
We may collect your IP address and your browser's User Agent string while using our site for security reasons and deriving aggregate information (analytics). This information is retained for a minimum of 1 and a maximum of 24 months.

Get email notifications of new releases

SIGN UP NOW TO OUR NEWSLETTER

AND NEVER MISS AN IMPORTANT UPDATE

captcha 
You may opt-out at anytime.
Feedback