How to trigger Form submit function from text field keypress?

Question

The form submit button works by clicking on the form submit button:

<button id="formBtn" onClick={submitForm(onFormSubmit)} >

Then I was trying to use "Enter" key to trigger that "submitForm" function by adding the code below in one text input in my form in TailwindCSS.

In the browser console I could only see log1, but both "submitForm" and "onFormSubmit" functions were not triggered. Why?

<input
  onInput={handleInput}
  onkeypress={(e)=>{
    if(e.key === "Enter" && !e.shiftKey) {
      console.log("log1:Enter detected")
      submitForm(onFormSubmit)
    }
  }}
/>

score 0 · Answer 1 · answered Apr 21 '23 at 07:31

Solved by this post: Trigger a button click with JavaScript on the Enter key in a text box

It is better to use "onkeyup", and use JavaScript to click on HTML buttons:

  <input
     onInput={handleInput}
     onkeyup={(e) => onKeyUpEnter(e)}
  />

  const onKeyUpEnter = (e: KeyboardEvent) => {
    console.log("onKeyUpEnter. e:", e);
    //e.preventDefault();
    if (e.key === "Enter" && !e.shiftKey) {
      console.log("Enter detected")
      document.getElementById("formBtn")!.click();
      //submitForm(onFormSubmit)
    }
  }

How to trigger Form submit function from text field keypress?

1 Answers1