Weird behaviour submitting form on keypress

Suite and Optimus
#1

I have a standard login form. Suite 8 GPL
2x inputs Username & password, 1 x button

When using this with a “keydown” event to capture the enter key and submit the form
it doesn’t work because DHTMLX will not see the value in the password field until it has lost focus by clicking on another form input object. In this case either the username field or the login button.

To make this work the only way I could find was to actually get the input field value using JS and then use DHTMLX to then set the value of the input. See exapmle below.

form.events.on("keydown", function(event, name) {
    if(event['key'] === 'Enter'){
        
        var pval = document.getElementsByName("password")[0]["value"]; // JS
        // form.getItem("password").setValue(pval); // un comment this to get pwa to show a value.

        var un = form.getItem("username").getValue();
        var pwa = form.getItem("password").getValue(); // DHTMLX - no value unless you un comment the JS line
        var pwb = pval

        console.log(name, un, pwa, pwb);
    }
});
#2

New value applies to the form control only on blurring out of the control (it signalizes that the edit process was finished), so please, try to call blur() method in the keyDown event before getting the control’s value:

Like:

form.events.on("keydown", function(event, name) {
    if(event['key'] === 'Enter'){
        
        var pval = document.getElementsByName("password")[0]["value"]; // JS
        // form.getItem("password").setValue(pval); // un comment this to get pwa to show a value.

        form.getItem("username").blur(); //add this line
        var un = form.getItem("username").getValue();
        var pwa = form.getItem("password").getValue(); // DHTMLX - no value unless you un comment the JS line
        var pwb = pval

        console.log(name, un, pwa, pwb);
    }
});
#3

I tried your method…

form.events.on("keydown", function(event, name) {
    if(event['key'] === 'Enter'){
        
        var pval = document.getElementsByName("password")[0]["value"]; // JS
        // form.getItem("password").setValue(pval); // un comment this to get pwa to show a value.

        form.getItem("username").blur(); //add this line
        var un = form.getItem("username").getValue();
        var pwa = form.getItem("password").getValue(); // DHTMLX - no value unless you un comment the JS line
        var pwb = pval

        console.log(name, un, pwa, pwb);
    }
});

All I get in the console is “password abcd empty string 1234” both inputs get a green line around them so the blur is working. I even tried it with a blur() on password but the value doen’t seem to exist until you put the focus manually on another element… I say manually as I tried to do it programmatically just in case e.g.

form.getItem("username").focus();

but still nothing. If I manually click back into the username field after filling out the password field and press enter then there is a value there.

Any other ideas?

here is the example https://snippet.dhtmlx.com/skaiyf4t

#4

Hello;

could you try : DHTMLX Snippet Tool

i comment the changes

#5

That doesn’t work either…
There should be 4 values… all that is returned in your snippet is

password/abcd//1234

The 3rd value is missing and that is the one that doesn’t not exist in the virtual DOM unless you get it and set it or click off onto another input.

Thanks for trying

#6

try this one pls;

https://snippet.dhtmlx.com/rxn652m9

2 Likes
#7

Nice… that worked…
I wonder if that is the intended method to achieve this out come or if there is an issue with the blur() method?

#8

The problem;

you cant get the value because blur is not finished yet. So, it is need to use the awaitRedraw() to wait till that operation finishes.

that what i learn my new friend Sematic.

#9

My apologies for the incomplete example. The @NewBee’s solution with the awaitRedraw is correct.
He’s right. You need to “wait” till the page render the input’s blurring to take effect.