Form Submiting Doesn't Work, It refetches getStaticProps instead

I have simple form with some inputs, I call submitHander function and just testing if it calls onSubmit

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('called?');
  };

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('called?');
  };

this is what I have and instead of logging "called?" it makes GET request of what API fetches I make in getStaticProps, and why does it happens like that? isn't it supposed to run submitHandler function? apply-now is my route in /pages

3 Replies

yaviscoke•16mo ago

<SForm onSubmit={submitHandler}>
  <Input
    label="Name"
    required
    name="name"
    onChange={changeHander}
    value={formValues.name}
  />
    <Button
      type="submit"
      color="blueviolet"
      size="xl"
    >
      Apply
    </Button>
</SForm>

<SForm onSubmit={submitHandler}>
  <Input
    label="Name"
    required
    name="name"
    onChange={changeHander}
    value={formValues.name}
  />
    <Button
      type="submit"
      color="blueviolet"
      size="xl"
    >
      Apply
    </Button>
</SForm>

this is all I have in form

yaviscoke•16mo ago

and also logs this weird error

yaviscoke•16mo ago

oh I understand my issue it comes from my button component sorry

Gaming

Programming

Form Submiting Doesn't Work, It refetches getStaticProps instead