Adding event to radio or checkbox

Suite and Optimus Suite 5
#1

When adding an event to input it is possible to do this:

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

This works for an input, how can an event be added to a radio or checkbox?

#2

There is a ready event handler onChange()
docs.dhtmlx.com/doku.php?id=dhtm … t_onchange
The 3th parameter is for checkboxes and radio buttons.

#3

The onChange event only fires when the input is changed. This is not enough because I need to focus the cursor to a field even when the data is not changed.

The onKeyDown event works. I am able to check if the tab key or enter key was pressed and then focus() to a particular field based userdata and other criteria.

I cannot use the onKeyUp event because by the time this fires, the focus has already been moved to the default input (based on the standard tab sequence) and the is no way to know what field the user just came from.

So I need to attach the onKeyDown event to every element.

This is sort of what I am doing:

	function tabfunc(){
		if ( (event.keyCode==9) || (event.keyCode==13)) {
				var n = form_ref.getInput( form_ref.getUserData(this.name,'tab') )			
				if (n != null) setTimeout(  function(){ n.focus() } , 0)
		}
	}

	form_ref.forEachItem(function(id){

		if ( inList( form_ref.getItemType(id), ['input'] )) {		
			
			if (window.addEventListener) 
				form_ref.getInput(id).addEventListener("keydown",tabfunc,false);
			else 
				form_ref.getInput(id).attachEvent("keydown",tabfunc);
		}
			
	})

This works for input fields. I need to be able to attach onKeyDown to a radio and checkbox.

Is there a way to do this?

#4

I tried a few things to get the html radio object…not much luck.

On a side note I figured out how to make my tab function work for any form and also how to make shift-tab / shift-enter go backwards:

app.cancelEvent=function (event) {
	if (event.preventDefault) 
		event.preventDefault();
	else 
		event.returnValue = false; 
}

function tabfunc(event, frm) {
	if ( (event.keyCode==9) || (event.keyCode==13)) {
		if (event.shiftKey) {
				var n
				frm.forEachItem(function(xid){
					var tabStop = frm.getUserData(xid, 'tab') 
					if (tabStop == event.srcElement.name)
						n = frm.getInput( xid )
				})
		}
		else 
			n = frm.getInput( frm.getUserData(event.srcElement.name,'tab') )			
		
		if (n != null)  n.focus() 

		app.cancelEvent(event); 
		return
	}
}


function formAttachTabFunc(frm){		
	frm.forEachItem(function(id){
		if ( inList( frm.getItemType(id), ['input'] )) {		
			if (window.addEventListener) 
				frm.getInput(id).addEventListener("keydown",function(){tabfunc(event, frm)},false);
			else 
				frm.getInput(id).attachEvent("keydown",function(){tabfunc(event, frm)} );
			}
	})
}

formAttachTabFunc(form_ref);

I hope there is a way to set the focus to a checkbox and radio programmatically.

Somehow the standard tab key (without interrupting the event) can do it. You can press the space bar and it will select/deselect correctly.

#5

For fun I created dhtmlXForm prototypes in case anyone might need this functionality:

dhtmlXForm.prototype.cancelEvent=function(event) {
	if (event.preventDefault) 
		event.preventDefault();
	else 
		event.returnValue = false; 
}


dhtmlXForm.prototype.tabFunc = function(event) {
	var that = this
	if ( (event.keyCode==9) || (event.keyCode==13)) {
		if (event.shiftKey) {
				var n
				this.forEachItem(function(xid){
					var tabStop = that.getUserData(xid, 'tab') 
					if (tabStop == event.srcElement.name)
						n = that.getInput( xid )
				})
		}
		else 
			n = this.getInput( this.getUserData(event.srcElement.name,'tab') )			
		
		if (n != null) {
			n.focus() 
			this.cancelEvent(event); 
		}
		return
	}
}


dhtmlXForm.prototype.tabFuncAttach = function(frm){	
	var that = this
	this.forEachItem(function(id){
		if ( that.getItemType(id) == 'input' ) {		
			if (window.addEventListener) 
				that.getInput(id).addEventListener("keydown",function(){that.tabFunc(event)},false);
			else 
				that.getInput(id).attachEvent("keydown",function(){that.tabFunc(event)} );
			}
	})
}

form_ref.tabFuncAttach()

Here’s how the userdata in the form goes:

{type:"input",		name:"a",		label:"A",		userdata:{tab:"b"}},
{type:"input",		name:"b",		label:"B",		userdata:{tab:"a"}},

I am sure you’ll be able to point me in the direction of adding radio/checkbox.

#6

Native onForcus/onBlur will be in the next version. If you have active support license - write there to get it earlier.

#7

Thank you. I will contact sales/support and check if I can get an early release and help beta test.

Hopefully onBlur and onFocus can do it. In standard html forms I have been using onKeyDown and .focus().

I did purchase the pro version and am planning on buying the upgrades at each opportunity. I am steering all new development of our product into dhmtlx full screen layouts. So far I have found everything needed inside dhmltx. This is the first time I’ve been unable to find a way.

I hope there is: setRadioFocus(), setCheckBoxFocus(), setSelectFocus() and maybe setContainerFocus().

#8

Are we any closer to trapping Radio Button events?