Articles

Javascript

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

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

 

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');
}
});

Newsletter

captcha

Connect with us

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