Events Handling

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 form, it's attached to each control inside it. You can determine what is the target control for event by the ID passed to event handler.

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

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

myform.attachEvent(evName, evHandler);

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

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

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

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

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

There are 2 possible scenarios:

1. 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);
   }

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

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

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

• getCalendar()
• getColorPicker()
• getCombo()
• getEditor()

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

FULL LIST OF EVENTS