fom submit after preventDefault() when using react

Question

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

nitte93 · Accepted Answer · 2017-01-29 13:34:50Z

5

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

answered Jan 29, 2017 at 13:34

nitte93

1,8483 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

noj · Accepted Answer · 2017-01-29 15:37:03Z

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

backpackcoder · Accepted Answer · 2017-01-29 13:31:53Z

0

Call submit on the form.

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

answered Jan 29, 2017 at 13:31

backpackcoder

3271 silver badge7 bronze badges

2 Comments

Abhilash Over a year ago

this wont work as it throws undefined function submit()

backpackcoder Over a year ago

You're right. I misread you're code as the event being on the form.

Collectives™ on Stack Overflow

fom submit after preventDefault() when using react

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related