Can't get form onSubmit to call the function I am giving it

Answered

Araucanian herring posted this in #help-forum

Open in Discord

Araucanian herringOP

2023-09-25T01:53:20.000Z

I must be stupid or something. I have a simple page trying to log in using a form. I am trying to use react-hook-form which is basically irrelevant information, because the only thing that happens is my page refreshes with the input fields as query parameters. Its like nothing I pass as props to the form component does anything. Is there some kind of edge case thing I am dealing with that is causing this to happen? I don't understand.

<form onSubmit={(e) => {
    e.preventDefault();
    console.log(e);
  }}>
... formStuff
<button type="submit">submit</button>
</form>

Answered by Sussex Spaniel

Yea I just created a codesandbox, recreating the html you had listed, unsure what dependency the Input element comes from, I just changed it to input and removed the label attr. Here's a screenshot of the output:

View full answer

69 Replies

2023-09-25T01:58:57.000Z

can you share your full onsubmit code... like what do you do after submission?

Araucanian herringOP

2023-09-25T02:02:39.000Z

the above thing is all i do on submit. I just want to prevent default and console.log. That doesn't even work

2023-09-25T02:03:16.000Z

and thats the only form in the whole page (that the button is nested in)?

also as you are using react-hook-form, you should make use of their wrapper: https://react-hook-form.com/docs/useform/handlesubmit

Araucanian herringOP

2023-09-25T02:05:36.000Z

No other form.

and the react-hook-form stuff is irrelevant if i can't even prevent default

and console.log

2023-09-25T02:06:10.000Z

im pretty sure they call prevent default...

Araucanian herringOP

2023-09-25T02:06:29.000Z

i've removed react-hook-form completely just trying to get a console log

like i said, react-hook-form is irrelevant because I can't even get a form to console.log

@Araucanian herring like i said, react-hook-form is irrelevant because I can't even get a form to console.log

2023-09-25T02:07:29.000Z

yeah i know your issue, i was just mentioning it

Araucanian herringOP

2023-09-25T02:07:51.000Z

sure. I've used react-hook-form quite a bit before.

2023-09-25T02:08:18.000Z

im lost on the issue as i have used it prevent default many times with no issues...

and this is pages or app dir?

Araucanian herringOP

2023-09-25T02:08:42.000Z

pages in the app dir

/auth/login

2023-09-25T02:09:18.000Z

and im assuming a client component

Araucanian herringOP

2023-09-25T02:09:44.000Z

yeah. its just in the page file with "use client"

2023-09-25T02:11:29.000Z

well idk the error... it is [documented to work for react](https://react.dev/learn/responding-to-events#preventing-default-behavior>) and it works for me... so unless you have something really weird going on, idk...

can you try with nextjs canary version...?

Araucanian herringOP

2023-09-25T02:12:42.000Z

<form
      onSubmit={(e) => {
        e.preventDefault();
        console.log(e);
      }}
    >
      <Input
        label="Email"
        id="email"
        type="email"
        placeholder="example@mail.com"
        onChange={() => {}}
      />
      <button type="submit">Send Password Reset Email</button>
    </form>

here is the full component.

this doesn't prevent default and doesn't console.log

2023-09-25T02:13:45.000Z

and do you somehow have javascript disabled in your browser

Araucanian herringOP

2023-09-25T02:16:35.000Z

just checked. enabled

2023-09-25T02:18:13.000Z

if you put a useffect above the return and run alert or something to check...

i just want to see if somehow react isn't running the js on client

2023-09-25T02:41:36.000Z

but if you can create a [minimal-reproduction-repository](https://nextjs-faq.com/minimal-reproduction-repository), then create it and see if the error still continues.... and then create an issue on github

Araucanian herringOP

2023-09-25T03:54:57.000Z

well I removed everything from my app, and even just a page with an input with onChange={console.log} doesn't yield anything in the console

idk what the heck is happening

@riský if you put a useffect above the return and run alert or something to check...

2023-09-25T03:58:05.000Z

and this^?

Araucanian herringOP

2023-09-25T03:58:52.000Z

yeah no dice

2023-09-25T03:59:13.000Z

i think you have to have js disabled...

there is no way that it isn't working...

like do you have an adblocker that is disabling it

Araucanian herringOP

2023-09-25T03:59:52.000Z

i tried 2 different browsers and both have it enabled

2023-09-25T04:00:10.000Z

ðŸ˜

if you start a whole new repo with create-next-app and run that, is that working?

Araucanian herringOP

2023-09-25T04:00:53.000Z

allowJS: true in my tsconfig

@Araucanian herring allowJS: true in my tsconfig

2023-09-25T04:01:06.000Z

that doesn't mean anything here

it basicly just means it checks .js/.jsx files for types and not just .ts/.tsx

Araucanian herringOP

2023-09-25T04:01:57.000Z

oh i see

Araucanian herringOP

2023-09-25T04:10:53.000Z

well new project works. but why

2023-09-25T04:11:38.000Z

you must have some special config ðŸ˜

Araucanian herringOP

2023-09-25T04:11:51.000Z

i went through and made sure the configs match

2023-09-25T04:12:12.000Z

try deleting .next folder and node_modules + update to latest of things and try again

Araucanian herringOP

2023-09-25T04:15:14.000Z

idk how but that worked

thanks.

ðŸ˜µâ€ðŸ’«

2023-09-25T04:19:38.000Z

ig some weird cache

i should have lead with that tbh

Araucanian herringOP

2023-09-25T04:26:01.000Z

welp. it worked for like 5 minutes

2023-09-25T04:26:26.000Z

nooooo

what occures now? no js events again

Araucanian herringOP

2023-09-25T04:26:50.000Z

same kind of thing as before. no js seems to run

2023-09-25T04:27:02.000Z

try deleting it again

lol but actually i have no idea

Araucanian herringOP

2023-09-25T04:27:27.000Z

i tried just nuking .next this time

2023-09-25T04:27:34.000Z

you may be having some weird ~~decency~~ dependency that is messing with things

@Araucanian herring i tried just nuking .next this time

2023-09-25T04:27:43.000Z

yeah node_modules is usaly unnessary

Araucanian herringOP

2023-09-25T04:27:46.000Z

dependency*?

"dependencies": {
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "classnames": "^2.3.2",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "firebase": "^10.3.1",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.46.2",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.3",
    "@testing-library/react": "^14.0.0",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
    "encoding": "^0.1.13",
    "eslint-config-prettier": "^9.0.0",
    "jest": "^29.7.0"
  }

i don't think i am using anything that unique

2023-09-25T04:28:44.000Z

hmmm

@Araucanian herring dependency*?

Sussex Spaniel

2023-09-25T04:53:51.000Z

Yea I just created a codesandbox, recreating the html you had listed, unsure what dependency the Input element comes from, I just changed it to input and removed the label attr. Here's a screenshot of the output:

Answer

Sussex Spaniel

2023-09-25T04:54:07.000Z

Also, here's a link to the codesandbox itself: https://codesandbox.io/s/smoosh-water-9x4hrk?file=/src/App.tsx

Might be as the original helper says, an odd bug, because as you can see, I basically reproduced it, but did not run into the bug. (I say basically because I didn't use the Input element but opted for the input element, although I doubt that had influence).

2023-09-25T04:59:16.000Z

so your custom input component was the issue?

Ohh you didn't create it