Send data from a form by pressing the "ENTER" key in an input

Ask the community
,
1

Good morning, I have a login form in which you have input elements, I would like to know if there is any way to send the data by pressing the “INTRO” key without having to press the submit button

2

Yes you can place your code in a function and follow these syntax https://www.wix.com/velo/reference/$w/keyboardevent/key
https://www.wix.com/velo/reference/$w/textbox/onkeypress

3

Indeed that is what I was seeing, only that I have a slight problem, when I enter my code within the function it respects me and it works without problem the detail is as follows, I have a lightbox in case there is an error when entering the data itself that when incorporating the function appears by itself without the need to introduce data to the inputs, why does this happen? I show code of how I incorporate it

$w ( “#contrasena” ). onKeyPress ( async () => {
let email = $w ( “#email” ). value
let contrasena = $w ( “#contrasena” ). value
await checkLogin ( email , contrasena )
})

async function checkLogin ( email , contrasena ) {
wixData . query ( “logingers” )
. eq ( “title” , email )
. eq ( “contrasena” , contrasena )
. find ()
. then (( res )=>{
if ( res . items . length > 0 ) { //setting online-status…
wixStorage . session . setItem ( “onlineState” , “true” );
wixLocation . to ( “/eventos” )
} else {
wixWindow . openLightbox ( ‘loginwarn’ );
//console.error(“Email/Contrasena wrong!”)
}
});
}

4

Hi there :wave:t2: I do something similar on my site. You need to let the code know which key you want to look for (in this case the “Enter” key) otherwise it will run for any key, which is not what you want because then users won’t be able to fill in the input form.
Try something like the code below.
The “#yourElement” is the input field, and if a user is on the input field and presses enter it will run your checkLogin() function.
And “#yourSubmitButton” is the submit button, and if a user clicks it will run your checkLogin() function.

// Code for pressing the Enter key when on an input element
$w("#yourElement").onKeyPress(async(event) => {
    if (event.key === "Enter") {
        let email = $w("#email").value;
        let contrasena = $w("#contrasena").value;
        await checkLogin(email,contrasena);
    }
})

// Code for pressing the submit button
$w("#yourSubmitButton").onClick(async(event) => {
    let email = $w("#email").value;
    let contrasena = $w("#contrasena").value;
    await checkLogin(email,contrasena);
})

// Then the checkLogin function down here
// . . .

Good luck!

5

thanks if it worked for me with the adjustments made

1 Like