Can't capture the form's submit event in a React app

user_1993761 0
Viewed 392

Here is a demo of my problem. This is a new app created from running CRA and only changing the App.js code to this:

import './App.css';
function App() {
  function getSubmit() {
    alert('submit!')
    return false
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p
        <form onsubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div >
  );
}
export default App;

It compiles and runs but the function "getSubmit" is not called. Running in debug mode, a breakpoint set there is not hit. The window tab flashes when I click Submit, but I can't read what's on it.

This the package.json if it would be helpful:

{
  "name": "formsubmit",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
reactjs form-submit javascript
3 Answers

You have to prevent the default behaviour of the submit event, by calling e.preventDefault(). And in React it has to be onSubmit, not onsubmit. Try with this:

import './App.css';
function App() {
  function getSubmit(e) {
    e.preventDefault();
    alert('submit!');
    return false;
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Test form submit capture.
        </p
        <form onSubmit={getSubmit}>
          Testing form submit <br />
          Click "submit": <br />
          <button type='submit'>
            Submit
          </button>
        </form>
      </header>
    </div >
  );
}
export default App;
user_152886410

This works because when you submit a form it reloads by default, so prevent default as below:

function getSubmit(event) {
  event.preventDefault();
  alert('submit!')
  return false
}
user_173567470

You are missing a closing '>' on one of your p tags but assuming that was just a copy error, I think your real problem is:

<form onsubmit={getSubmit}>

onsubmit doesn't mean anything to javascript, you need onSubmit

Also, you might want to pass in an event to your submit handler and prevent the default submit behavior of refreshing the page so you can see what's going on in your debugger.

  function getSubmit(event) {
    event.preventDefault()
    alert('submit!')
    return false
  }
user_46343730
Related