Getting Error "Form Submission Canceled Because the Form Is Not Connected"

Angular 2: Form submission canceled because the form is not connected

There might be other reasons this occurs but in my case I had a button that was interpreted by the browser as a submit button and hence the form was submitted when the button was clicked causing the error. Adding type="button" fixed the issue. Full element:

    <button type="button" (click)="submitForm()">

React form error: Form submission canceled because the form is not connected

The browser's default handling of a form submission is to make an HTTP POST request to the server and reload the page with whatever is in the response (which may or may not even be content the browser can render). This is almost never what you want in a single page application, because your entire app and all of its state is simply discarded.

Instead of wiring up the form submit as a click handler on the submit button, you should instead wire it up as the onSubmit event of the form. You also want to call preventDefault() on the event, which prevents the native browser behavior. The button doesn't need a click handler at all as long as it has the attribute type="submit" (presumably, inside of your Submit component, there is a regular button element).


formSubmit(event) {
  event.preventDefault();
  // your submit logic
}

render() {
  // ...
  <form onSubmit={(event) => this.formSubmit(event)} 
    // ... Inside `Submit` should be something like:
    <button type="submit" />
  </form>
}

Form submission canceled because the form is not connected in react js. Where am I going wrong?

I suspect your code is submitting the form and some default form actions are occurring. This is because button elements are of type="submit" by default when no type attribute is provided, and the form element has no onSubmit handler to prevent the default form actions from occurring. When the default form action occurs, generally the page will reload, this is likely wiping out your state update.

Explicitly declare the button to be type="submit" and move the handleSubscription callback to the form element's onSubmit handler. In handleSubscription prevent the default submit action.

handleSubscription = (event) => {
  event.preventDefault();

  this.setState({
    isLoading: true,
    redeemVoucherForm: false,
    error: false,
    verified: false
  });
};

...

<form
  className={styles.redeem_form}
  onSubmit={handleSubscription}
>
  ...
  <button
    className={styles.avail_subs}
    disabled={!this.state.voucherNumber || !this.state.pin}
  > 
    Avail Subscription
  </button>        
</form>

Form submission canceled because the form is not connected - Console error

I just change the button type into button and not submit, and IT WORKS

<Button type="button" onClick={onSubmit} className="btn btn-success">Submit</Button>

Error: Form submission canceled because the form is not connected, React.js

You can call preventDefault inside the onsubmit handler:

const onsubmit = (e) => {
  e.preventDefault();
  props.onadd({
    title: getTitle, 
    image: getImage,
    rating: getRating
  }); 
}