Form Event Missing


#1

No onEnter event?
How can I send the form when the user press the “Enter” key?

Before on dhtmlx5+ I am able to bind an event using

 form.attachEvent("onEnter", function(name){
  ... code here
 })

How to do that on dhtmlx v6?
In your documentation the available events are the following only

  • afterSend
  • beforeSend
  • buttonClick
  • change
  • validationFail

How to bind the “onEnter”? What I am trying to accomplish is to send the data when a user press “Enter” key in the selected/active input control.

How to achieve that?


#2

Here’s what I have working for a PIN login form I’m using. The interval is set because I don’t know exactly when the form will be shown, since this was written as reusable code; sometimes it’s shown right on the page, sometimes it’s in a dhx.Window opened by a button. If your form is visible on page load, you could maybe simplify it a bit.

Note that this only applies the “onEnter” functionality to a single input field. I think the onEnter applied to the entire form in older versions of DHX. If you need it for the whole form, maybe you could grab an array of the form inputs, and do a forEach on the array to apply this eventHandler to each input.

var interval = setInterval(function(){
    var el = document.getElementById("PIN");
    if (el){
        clearInterval(interval);
         el.addEventListener("keyup",function(event){
             if (event.keyCode === 13){  // "Enter" key
                el.blur();
                setTimeout(function(){
                    document.getElementById("btnSubmit").click();
                },100);
            }
        });
    }
},300);

The setTimeout() before doing the button click is there to allow time for the form field time to finish setting the value. Without it, the value of the field was still empty at the time the button click happened, which meant my form was submitting with no PIN value. I’m hoping the DHX dev team gets around to putting an onEnter event back into the form, so I’m putting up with the setInterval and setTimeout means of handling event timing for now. If the devs have a better way of doing it, I’d love to see it.


#3

Thank you for the reply. I found another way for the “enter” key event to work that day.

I made a quick test of your code and it is working fine.
Thanks for your solution

My workaround is different I use jquery to simplify my code because I will be dealing on lot of controls (form fields).

$("#element_id").keyup(function(ev){
   .... script here
});

I forgot to update this question. But it would be nice to have the old API like in V5 to work on this V6.
It is easier to have api like below.

 formx.events.on("OnEnter", function(name){
 ... code here
});

Thank you.


#4

Thank you for your suggestion. I’ve sent your request to the dev team, so the key events may appear in the dhtmlxForm in the future updates.


#5

Hello.

In the latest dhx.Suite update (7.2) we have added the keyDown event allowing to catch the key pressing: