Home > Enterprise >  HTML form is submitted up-to-date when I press Enter instead of clicking button
HTML form is submitted up-to-date when I press Enter instead of clicking button

Time:07-30

I have form like below.

        <form onSubmit={handleSubmit(onValid)}>
            <input
                {...register("searchname", { required: "이름을 적어주세요." })}
                onChange={(text)=> setSearchinput(text)}
                type="text" placeholder="이름을 검색해주세요." className="focus:outline-none focus:border-[#FF2D78] border-2 w-56 border-gray-500 rounded-md py-1 text-center"></input>
            <button className="bg-gray-300 rounded-md py-1 px-3 ml-2">검색</button>
        </form>

and I use useForm() to submit this form.

It works perfect.

But when I press enter instead of clicking button.

input value is not up-to-date or isn't applied at all.

for example,

I wrote input as 'abc' and then 'cdb' and press enter then abc value is applied, not cdb.

How to submit with up-to-date input with enter key instead of clicking?

CodePudding user response:

I've noticed something similar to that when using the register together with the onChange prop direct on the input. I just tried it on my repo and I got your issue if I add onChange to the input:

https://github.com/joaoeffting/multi-step-form-with-react-hook-forms/blob/main/src/components/StepOne.tsx#L38

I've found this here on the site and it worked:

https://stackoverflow.com/a/69448858/5288271

Basically, do this (move the onChange inside the register):

{...register("searchname", { required: "이름을 적어주세요.", onChange={(text)=> setSearchinput(text)} })}
            
  • Related