CODEWITHSUNDEEP
javascriptreactjs
Abhilash
Abhilash

Reputation: 2953

fom submit after preventDefault() when using react

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

Upvotes: 3

Views: 3397

Answers (3)

noj
noj

Reputation: 6759

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

Upvotes: 1

nitte93
nitte93

Reputation: 1840

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

Upvotes: 5

backpackcoder
backpackcoder

Reputation: 327

Call submit on the form.

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

Upvotes: 0

Related Questions