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>
}
}

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>
}
}

• javascript
• reactjs

Share Improve this question Follow asked Jan 29, 2017 at 13:27 AbhilashAbhilash 2,95333 gold badges3838 silver badges7070 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

To submit the form explicitly you need to call the submit() method

Your verifyFields function would bee 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();
    }
},

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>
        );
    }
});

Call submit on the form.

e.preventDefault();
    if (this.state.primaryGuestName && this.state.primaryGuestMobile) {
       e.target.submit();
    } else {
        showErrors();
    }
}