Handling Events

dhtmlxForm allows to handle different events using its events handling system. In general it is similar to what is used in other DHTMLX components. You can attach several handlers to the same event and detach them using two respective methods: attachEvent(...) and detachEvent(...).

Though event handler is attached to the form, it's attached to each control inside of it. You can determine what is the target control for event by the ID passed to the event handler.

myForm.attachEvent("onButtonClick", function(id){
    alert("Button with name "+id+" was clicked");
});

Event names are case-insensitive.

Attaching event handler

If you need to attach event, use the attachEvent() method.

myForm.attachEvent(evName, evHandler);

evName - the name of an event;
evHandler - the user-defined event handler.

Detaching event handler

You can also delete event if you have such necessity. The detachEvent() method helps you here.

var id = myform.attachEvent("onButtonClick",some_code);
   ...
myform.detachEvent(id);

Triggering HTML Events

You have the possibility to handle HTML input-related events for a number of dhtmlxForm inputs: input and textarea, password, calendar and colorpicker.

All you have to do is to get an input instance through the getInput() method. Then you can work with the received instance the same as with any ordinary HTML object.

There are 2 possible scenarios:

You want to handle some HTML event and keep dhtmlxForm events you have attached before.

var inpLogin = myForm.getInput("login");
if (window.addEventListener) {
    inpLogin.addEventListener("blur",doOnBlur,false);
} else {
    inpLogin.attachEvent("onblur",doOnBlur);
}

You want to handle some HTML event and overwrite (detach) the already attached dhtmlxForm events.

var inpEmail = myForm.getInput("email");
inpEmail.onblur = doOnBlur;

Using the integrated DHTMLX components' events

To use events of the dhtmlx components you've integrated into form (a list of components you can put into form), you should:

get component instance through one of the following methods:

and attach the appropriate event.

var formData = [
    ...
    {type: "combo", name: "myCombo", label: "Select Band", options:[
    {value: "opt_a", text: "Cradle Of Filth"},
    {value: "opt_b", text: "Children Of Bodom", selected:true}
]};
 
var myForm = new dhtmlXForm("form_container",formData);
var combo = dhxForm.getCombo("myCombo");
combo.attachEvent("onCheck",function(value,state){
    if (value==2) return false;        
    return true;                                                           
});

The full list of events

You can find the list of all available events in the dhtmlXForm API.