AJAX and onClick events for elements of jform in joomla

Question

I need to populate a child dropdown list based on the selection made in the parent dropdown list for which AJAX is required. But I don't understand how I can add onClick events in jform where fields are defined in xml tags. I am using joomla 2.5.3 for your kind information.

Any help would be appreciated.

<field
        name="fkclass"
        type="text"
        label="Class"
        description=""
        class="inputbox"
        required="true">
        <option value="">Select a Class</option>
    </field>

Answer 1

You have to make your own field http://docs.joomla.org/Creating_a_custom_form_field_type. Then you have to load your javascript/AJAX code during the get input function.

For example I made my own nice looking color field which looks like:

defined('_JEXEC') or die();

class JFormFieldDpcolor extends JFormFieldText
{

    protected $type = 'Dpcolor';

    public function getInput ()
    {
        $document = JFactory::getDocument();
        $document->addScript(JURI::root() . 'administrator/components/com_dpcalendar/libraries/jscolor/jscolor.js');
        return parent::getInput();
    }

    public function setup (SimpleXMLElement $element, $value, $group = null)
    {
        $element['class'] = $element['class'] . ' color' . ($element['required'] ? '' : ' {required:false}');
        $return = parent::setup($element, $value, $group);
        return $return;
    }
}

This should help you getting started. In the javascript code you can then make a listener which is triggered when the parent dropdown changes it's value.