"Enter" key is activating button, but I do not want that.

Ask the community
,
1

Hi, I added a form to my Wix page with several input fields, but only 1 field is required, the others are optional. the problem is when I hit “enter” on this first field (the required one) it already triggers the form submission. I do not want that as I first want to check the user against the database to retrieve related data.
And It also triggers the other button on the page. I don’t know why they are linked to the “enter” key.

746×420 11.6 KB

First I show only the name input
(if I hit “enter” here, it automatically submits the form

782×592 17.5 KB

If the user types a name that is already in the database I show all the other relevant fields

833×521 18.1 KB

If the user types a name that is not yet in the database I ask for them to confirm before they can continue
(if I hit “enter” here, it automatically ‘hits’ the confirmation button)

Is there a way to fix it?

(Obs: I am working on a dynamic page)

function hideAll_formInputs () {
    $w('#exerciseTask').hide()
    $w('#text25').hide()
    $w('#textBox3').hide()
}

function showAll_formInputs () {
    $w('#exerciseTask').show()
    $w('#text25').show()
    $w('#textBox3').show()
}
function showNewUserConfirmation(){
    $w("#newUserButton").show();
    $w("#newUserText").show();
    $w("#notANewUserText").show();
}

function hideNewUserConfirmation()  {
    $w("#newUserButton").hide();
    $w("#newUserText").hide();
    $w("#notANewUserText").hide();
}

export function nameInput_keyPress(event) {
    event2 = event;
    $w("#checkbox1").checked = false;
    hideAll_formInputs();
    hideNewUserConfirmation();
   
    if(event.key==="Enter"){
        wixData.query("user_forms")
        .eq("name", name)
        .find()
        .then(
            (results) => {
                if (results.items.length!==0){
                    queryResult = results;
                    console.log(results)
                    console.log(queryResult)
                    var nutriBeginner = queryResult.items[0]["nutritionBeginner"];
                    showAll_formInputs();
                    $w("#checkbox1").checked = true;
                }
                else {
                   showNewUserConfirmation();
                }
            },
            ()=> console.log("Error")
        );
    }else{
        setTimeout(() => {
            name=event.target["value"];
            console.log(name);
         },10);
    }
}

export function nameButton_click(event) {
    event2.key = "Enter";
    nameInput_keyPress(event2);
}

export function newUserButton_click(event) {
    console.log("button");
    hideNewUserConfirmation().then(
        showAll_formInputs()
    );
}
2

What is your page code? We cannot provide much assistance without seeing the code. See our community guidelines on making a new post.

3

Updated my post.