Articles
Javascript
- Details
- Hits: 935
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
- Have watched the Custom Fields -> Basic Features screencast;
- Some Javascript knowledge;
- FireBug might help in this task; (optional);
Usage
Select Components → Contact Enhanced → Custom 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 Custom Field (CF), then Save the changes, so you can see the Javascript CF 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.
Keep in mind that Joomla uses MooTools as it's default Javascript library, therefore we advise all users to use MooTools library code. If you need any javascript help check MooTools Documentation.
Code Example
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 Custom Field is required and if it is required, then adds a gray border aroud the field.
With Contact Enhanced you can add many other custom 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');
}
});