What am doing here is on clicking a link verify if all fields are filled if filled submit form as usual else will show some errors. But how can I continue submiting a form normally after using e.preventdefault in react?
var formComponent = React.createClass({
verifyFields: function (e) {
e.preventDefault();
if (this.state.primaryGuestName && this.state.primaryGuestMobile) {
// how can i continue with form submission here(not using xhr)
} else {
showErrors();
}
},
render: function () {
<form action={this.props.action} ref="booking_form" acceptCharset="UTF-8" method="post">
{form contents}
<a href="" name="submit_details" onClick={this.verifyFields}
className="btn-flat btn-large rd-button">Confirm Details</a>
</form>
}
}
To submit the form explicitly you need to call the submit() method
Your verifyFields function would become something like this.
verifyFields: function (e) {
e.preventDefault();
if (this.state.primaryGuestName && this.state.primaryGuestMobile) {
// how can i continue with form submission here(not using xhr)
document.getElementById('myForm').submit();
} else {
showErrors();
}
},
Call submit on the form.
e.preventDefault();
if (this.state.primaryGuestName && this.state.primaryGuestMobile) {
e.target.submit();
} else {
showErrors();
}
}
You shouldn't really query the dom for the form, instead use the onSubmit event and a button then the implementation is a lot cleaner:
var formComponent = React.createClass({
submit: function(e) {
if (!this.verifyFields()) {
e.preventDefault();
showErrors();
return false;
}
// continue here..
return true;
},
verifyFields: function () {
return this.state.primaryGuestName && this.state.primaryGuestMobile;
},
render: function () {
return (
<form action={this.props.action} onSubmit={this.submit} acceptCharset="UTF-8" method="post">
{form contents}
<button type="submit" className="btn-flat btn-large rd-button">Confirm Details</button>
</form>
);
}
});