Next.js Discord

Discord Forum

Troubles when submitting forms

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
When I submit a form - my form values get added to the URL of the page and my onSubmitHandle function doesn't even get called.
I've tried adding method='post' to my <form> element but then the page reloads and nothing happens, still no api call.

8 Replies

Asiatic LionOP
@joulev 
 const ContactForm = ({ className }: Props) => {
  const t = useTranslations();

  const handleContactSubmit = async (values: ContactFormValue) => {
    try {
      await api.contact.contactPerformai(values);
    } catch (err) {
      utils.toastError(err);
    }
  };

  return (
    <section className={classNames("home__form", className)}>
      <h2>{t("Form.header")}</h2>
      <h3 className="home__form__explanation">{t("Form.paragraph")}</h3>

      <Form
        onSubmit={handleContactSubmit}
        render={() => (
          <form method="post">
            <Field
              component={InputField}
              id="fullName"
              name="fullNAme"
              type="text"
              label={t("Form.fullName")}
            />
            <Field
              component={InputField}
              id="email"
              name="email"
              type="email"
              label="EMAIL"
            />
            <Field
              component={InputField}
              id="Phone Number"
              name="phoneNumber"
              type="number"
              label={t("Form.phoneNumber")}
            />
            <Field
              component={InputField}
              id="companyName"
              name="companyName"
              type="text"
              label={t("Form.companyName")}
            />
            <Button type="submit">{t("Form.button")}</Button>
          </form>
        )}
      />
    </section>
  );
};
@Asiatic Lion it's from react-final-form
joulev
Then you need to pass the handleSubmit prop like so
The method=post is irrelevant here, remove it
Asiatic LionOP
the problem was that i didnt pass handleSubmit from FinalForm to form onSubmit

      <Form
        onSubmit={handleContactSubmit}
        render={({ handleSubmit }) => (
          <form onSubmit={handleSubmit}>
it's fixed now, thanks