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"
]
}
}
You actually have to prevent the default behaviour of the submit event, and 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;
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
}
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
}