submitting form refreshes page instead of executing onSubmit function.

[adammo94]

I have a form on one page that behaves strangely, I literally copied it from other component in my app where it works fine.
On this specific page when I click button (which should submit the form) instead of executing onSubmit function page tries to submit the form with get request which leads to adding ? in URL. I literally commented out all my inputs, but it still refreshes.

const onSubmit = async (data: any) => {
  console.log(data);
};

const {
    register,
    watch,
    handleSubmit,
    control,
    reset,
  } = useForm<FieldValues>();

<ActiveDecisionWrapper
  noValidate
  onSubmit={handleSubmit(onSubmit)}
>

ActiveDecisionWrapper is a form.
And inside it I have:

<Button variant="isPrimary">
  Save changes
</Button>

[adammo94]

Classical me, found out I had two forms one inside another.

[GourishettySairam]

faced the same issue, One of my form is wrapped in styled components and i overlooked it. Thanks for posting this, it really helped me.

[zhondori]

Thank you for the answer, but how can i fix this issue? I also have two form one inside another but what is the solution?

[marko-hologram]

Thank you for the answer, but how can i fix this issue? I also have two form one inside another but what is the solution?

You must stop nesting forms. HTML spec says that <form> elements cannot be nested.

<form>
   First form

  <form>Nested form</form>
</form>

This above is invalid HTML.

Solution is to structure your code not to have nested forms. Hard to say what's the appropriate solution without understanding what you are trying to achieve and why would you require nested forms.

[krishna7889]

thank you so much

[Boomin7x]

i did same thing too, thanks for this

[shaquan1228]

Yall are amazing. This was my problem and I spent a very long time looking in every other direction.

[imtheaman]

Yeah, in my case it was happening cuz of webpack's hot reloading, then i created a build and ran that, things were working fine in release build

** In my case things were working correctly on local desktop environments but not on the local mobiles connected via ip on the same network **

[oldtune]

For me it was <form onSubmit={() => { handleSubmit(props.save); }}> that caused the issue. Changed it to

<form onSubmit={handleSubmit(props.save)}

fixed the issue