React - Preventing Form Submission
JavascriptReactjsJavascript Problem Overview
I've been experimenting with React. In my experiement, I'm using the Reactstrap framework.When I click a button, I've noticed that the HTML form submits. Is there a way to prevent form submission when a button is clicked?
I've recreated my issue here. My form is pretty basic and looks like this:
<Form>
<h3>Buttons</h3>
<p>
<Button color="primary" onClick={this.onTestClick}>primary</Button>
</p>
</Form>
What am I missing?
Javascript Solutions
Solution 1 - Javascript
I think it's first worth noting that without javascript (plain html), the form
element submits when clicking either the <input type="submit" value="submit form">
or <button>submits form too</button>
. In javascript you can prevent that by using an event handler and calling e.preventDefault()
on button click, or form submit. e
is the event object passed into the event handler. With react, the two relevant event handlers are available via the form as onSubmit
, and the other on the button via onClick
.
Example: http://jsbin.com/vowuley/edit?html,js,console,output
Solution 2 - Javascript
No JS needed really ...
Just add a type
attribute to the button with a value of button
<Button type="button" color="primary" onClick={this.onTestClick}>primary</Button>
By default, button elements are of the type "submit" which causes them to submit their enclosing form element (if any). Changing the type
to "button" prevents that.
Solution 3 - Javascript
preventDefault is what you're looking for. To just block the button from submitting
<Button onClick={this.onClickButton} ...
code
onClickButton (event) {
event.preventDefault();
}
If you have a form which you want to handle in a custom way you can capture a higher level event onSubmit which will also stop that button from submitting.
<form onSubmit={this.onSubmit}>
and above in code
onSubmit (event) {
event.preventDefault();
// custom form handling here
}
Solution 4 - Javascript
Make sure you put the onSubmit attribute on the form not the button in case you have a from.
<form onSubmit={e => e.preventDefault()}>
<button onClick={this.handleClick}>Click Me</button>
</form>
Make sure to change the button onClick attribute to your custom function.
Solution 5 - Javascript
2 ways
First one we pass the event in the argument right into the onClick.
onTestClick(e) {
e.preventDefault();
alert('here');
}
// Look here we pass the args in the onClick
<Button color="primary" onClick={e => this.onTestClick(e)}>primary</Button>
Second one we pass it into argument and we did right in the onClick
onTestClick() {
alert('here');
}
// Here we did right inside the onClick, but this is the best way
<Button color="primary" onClick={e => (e.preventDefault(), this.onTestClick())}>primary</Button>
Hope that can help
Solution 6 - Javascript
In your onTestClick
function, pass in the event argument and call preventDefault()
on it.
function onTestClick(e) {
e.preventDefault();
}
Solution 7 - Javascript
There's another, more accessible solution: Don't put the action on your buttons. There's a lot of functionality built into forms already. Instead of handling button presses, handle form submissions and resets. Simply add onSubmit={handleSubmit}
and onReset={handleReset}
to your form
elements.
To stop the actual submission just include event
in your function and an event.preventDefault();
to stop the default submission behavior. Now your form behaves correctly from an accessibility standpoint and you're handling any form of submission the user might take.
Solution 8 - Javascript
import React, { Component } from 'react';
export class Form extends Component {
constructor(props) {
super();
this.state = {
username: '',
};
}
handleUsername = (event) => {
this.setState({
username: event.target.value,
});
};
submited = (event) => {
alert(`Username: ${this.state.username},`);
event.preventDefault();
};
render() {
return (
<div>
<form onSubmit={this.submited}>
<label>Username:</label>
<input
type="text"
value={this.state.username}
onChange={this.handleUsername}
/>
<button>Submit</button>
</form>
</div>
);
}
}
export default Form;
Solution 9 - Javascript
function onTestClick(evt) {
evt.stopPropagation();
}
Solution 10 - Javascript
You have prevent the default action of the event and return false
from the function.
function onTestClick(e) {
e.preventDefault();
return false;
}
Solution 11 - Javascript
import React from 'react'
import Button from './button'
import Input from './input'
function Form(){
function handleSubmit(event){
event.preventDefault();
}
return(
<div>
<h1>FORM</h1>
<form onSubmit={handleSubmit}>
<Input type = 'text' placeholder = "What's Your Name?" />
<Button buttonText = 'Submit' />
</form>
</div>
);
}
export default Form;
Solution 12 - Javascript
componentDidUpdate(){
$(".wpcf7-submit").click( function(event) {
event.preventDefault();
})
}
You can use componentDidUpdate
and event.preventDefault()
to disable form submission.As react does not support return false.