React - Form submission canceled because the form is not connected

Question

I want to get the value of input after submitting the form but code gives me the error - 'Form submission canceled because the form is not connected'. I know that if I change the button type from submit to button it will work, but I need submit method because on button click the other action is written and dont want to write code inside onclick function

    updateItem(e) {
        // console.log(this.input.value);
        console.log(2222222222);
        e.preventDefault();

    }

    render() {
        return (
            <div className='wrapper'>
                <form onSubmit={this.updateItem}>
                    <input className='input'
                        type="text"
                        defaultValue={this.props.defValue}
                    // ref={(value) => {
                    //     this.input = value
                    // }}
                    />
                    <button type="submit" 
                            className='submitButton' 
                            onClick{this.props.editItem}>Update
                     </button>
                </form>
            </div>
        );
    }

score 25 · Answer 1 · edited Jun 06 '23 at 13:02

25

I think all of these answers are wrong!. Here is what you should do.

since your form will be submitted with the onSubmit action then this type="submit" is what it is looking for within the form. Adding multiple buttons will trigger this warning since multiple actions are happening within the form. To fix that all you need to do is define a type to the 2nd or any other buttons ex type="button" this will fix your problem and you can add as many buttons as you like. Here is a full example.

1- Button #1

<button type="submit">My submit button</button>

!! The button having type="submit" must not have an onClick handler otherwise the error will remain. This button is tied directly to the form's onSubmit event

2- Button #2 to infinity

<button type="button">My 2nd action</button>

This one can have any standalone standard behaviour.

I hope it helps anyone having this issue.

edited Jun 06 '23 at 13:02

Ben

5,030
6
53
94

answered Mar 12 '21 at 20:45

jerryurenaa

3,863
1
27
17

3

Yeap, this answer is correct, it helped me <3 – callmenikk Feb 26 '22 at 20:46
Right oddly enough I had to specifically type all buttons within the form to type='button', you would think that's the default type. – Zargold Mar 28 '22 at 19:56
1

I only have one button on the form so... And the weird thing is even though I get this warning in the console log, it still actually submits the form correctly. – Jason Perrone Jun 02 '22 at 13:05
Holy cow, I've been looking for a reason why my submit button wouldn't actually trigger the submit. Getting rid of my onClick did the trick. – RogueGingerz Jul 03 '23 at 09:49

score 12 · Answer 2 · answered Oct 04 '19 at 10:15

Same error, but now with 2 buttons (in a Login form) :

<Button primary id="button_submit" type="submit">Log in</Button>
<Button onClick={onClickForgotPassword}>Forgot your password?</Button>

The onSubmit looks like this:

const onSubmit = data => {
    props.onLoginStart(data);
};

And the onClickForgotPassword was initially like this:

const onClickForgotPassword = () => {
    history.push('/auth/forgotpassword');
};

I also got the same error.

Solved it by adding the event.preventDefault to the onClickForgotPassword:

 const onClickForgotPassword = (event) => {
        event.preventDefault();
        history.push('/auth/forgotpassword');
 };

And now the message is gone.

@Andy your comment was a good reminder that a button without a type is automatically defaulted to type=submit — joedotnot, Nov 15 '21 at 12:05

score 11 · Answer 3 · answered Sep 11 '19 at 20:26

11

your form have an onSubmit handler, having a button with type='submit' and onClick is wrong, remove onClick prop and let the form onSubmit handler do submission

answered Sep 11 '19 at 20:26

gpbaculio

5,693
13
60
102

score 6 · Answer 4 · answered Oct 16 '18 at 13:03

what you want to do with this condition. because if you make that button type submit then onclick is not worthy. because form submit function will trigger. so you should do one thing. either remove onclick from that button or write both code in one function.

   <form onSubmit={this.updateItem}>
       <input className='input' type="text"defaultValue={this.props.defValue} />
       <button type="submit" className='submitButton'>Update</button>
   </form>

   updateItem = (event) => {
       //do your onsubmit work

       // do your button click work
   }

score 0 · Answer 5 · answered Sep 26 '22 at 15:30

<button type="button"> SUBMIT </button>

In my own case, I prevented the default form behavior on submit so I can use my custom handler while still getting this error. My case is different because it wouldn't be good practice to still give my button the type of "submit" if it isn't actually "submitting the form". I ended up giving the type button, which I previously assumed was the default, and I stopped getting the warning. I hope someone finds this useful.

score 0 · Answer 6 · answered May 23 '23 at 16:22

You Must do Form As this ..

  <form onSubmit={this.UpdateVal}>
                    <input type='text' ref={(v)=>{this.input=v}} defaultValue={this.props.details.name} />
                    <button type='submit'>Update Course</button>
                </form>

 UpdateVal=(e)=>{
        e.preventDefault();
          this.props.onEdit(this.input.value,this.props.Index);
          this.toggelIsEdit()
        }

React - Form submission canceled because the form is not connected

6 Answers6

Linked