Javascript

Javacript Custom Field for Contact Enhanced Component for Joomla

Description

You can add any JavaScript code to a page where a Contact Enhanced form is published. Please do not confuse this Custom Field with the Attributes Field of every Custom Field where you can add html attributes such as onblur="", onchange="", cols="", rows="" ,....

Requirement

  1. Have watched the Form Fields -> Basic Features screencast;
  2. Some Javascript knowledge;
  3. FireBug might help in this task; (optional);

Usage for Contact Enhanced 3.x and newer

Select Components → Contact Enhanced → Form Fields from the drop-down menu on the back-end of your Joomla! installation, then Select Javascript from the Field Type select list;

Choose a category for your Form Field, then Save the changes, so you can see the Javascript Field specific parameter:

  • Load in <head>: Whether to load the script between head tags (eg: <head><script>Your script</script></head>) or in the Form Field's position.

Joomla 1.6+ comes with a WYSIWYG code editor called CodeMirror. If CodeMirror is enabled Contact Enhanced will load it after the page is saved.

Code Example for Contact Enhanced 3.x and newer

The JavaScript code below will hide some Form Fields (by Form Field ID) and display them based on a Form Field selection:

jQuery(document).ready(function($){
	// Configuration
					// Enter each Form Field ID separated by commas.
					// You can find the Form Field IDs in the Form Fields Manager
	var productXoptions		= [37,9,4,1,19,47,2]; // Visible options  for Product X
	var productYoptions		= [18,13,14,6,52,3,45]; // Visible options  for Product Y
	var productSelectListAlias	= 'products'; // Form Field Alias

	// Hide all fields on page load
	$.each( productXoptions, function( key, value ){
		$('#ce-cf-container-'+value).addClass('collapse');
    });
	$.each( productYoptions, function( key, value ){
		$('#ce-cf-container-'+value).addClass('collapse');
    });
	
	//Add OnChange Event to Product Select List
	$("#"+productSelectListAlias).on('change',function(e) {
		var selectedProduct = $("#"+productSelectListAlias ).val();
		if( selectedProduct == 'Product X'){
			// Show Product X Form Fields
			$.each( productXoptions, function( key, value ) {
				$('#ce-cf-container-'+value).collapse('toggle');
			});
			//Make sure product Y Form Fields are hidden if Product X is selected
			$.each( productYoptions, function( key, value ) {
				$('#ce-cf-container-'+value).collapse('hide');
			});
	
		}else if(selectedProduct == 'Product Y'){
			// Show Product Y Form Fields
			$.each( productYoptions, function( key, value ) {
				$('#ce-cf-container-'+value).collapse('toggle');
			});
			//Make sure product X Form Fields are hidden if Product Y is selected
			$.each( productXoptions, function( key, value ) {
				$('#ce-cf-container-'+value).collapse('hide');
			});
		}
	});
});

 

 

 

Usage for Contact Enhanced 1.5 to 2.5

Select Components → Contact Enhanced → Form Fields from the drop-down menu on the back-end of your Joomla! installation, then Select Javascript from the Field Type select list;

Choose a category for your Form Field, then Save the changes, so you can see the Javascript Field specific parameter:

  • Load in <head>: Whether to load the script between head tags (eg: <head><script>Your script</script></head>) or in the custom field's position.

Joomla 1.6+ comes with a WYSIWYG code editor called CodeMirror. If CodeMirror is enabled Contact Enhanced will load it after the page is saved.

 

Code Example for Contact Enhanced 1.5 to 2.5

 

Output Example

The image on the right is a very simple way of how you can use Javascript on your forms.

This Javascript is meant to show you a simple usage. It only checks if the email Form Field is required and if it is required, then adds a gray border aroud the field.

With Contact Enhanced you can add many other Form Fields types, but for the purposes of this example there are only 3 (Name, Email, Select List );

 

Javascript Code Used in this Tutorial

// If you are trying to manipulate any element,
// you have to do that after dom ready.
window.addEvent('domready',function(){
// using console, very useful when using Firebug
// Get the email object and displays in the JS console
console.log($('email'));// Debug: Check your JS console
// Displays the email object (element) id
if($('email').hasClass('required')){// nonsense example
$('email').set('style','border:2px dashed SlateGrey');
}
});
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.
Feedback