CODEWITHSUNDEEP
javascriptreactjs
John
John

Reputation: 257

React - Form submission canceled because the form is not connected

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

Upvotes: 19

Views: 62730

Answers (8)

Cdev_3
Cdev_3

Reputation: 1

Because the form already listens to the submit event, you do not need to listen to the event on the button type = 'submit'. Let's remove the onClick event on the submit button

Upvotes: 0

dafydd j
dafydd j

Reputation: 51

This happened when I had a button with type='submit' and an onClick event.

<button type='submit' onClick={() => changeInput((prev) => !prev)} >Submit</button>

To fix, extract the onClick to a handler above

function eventHandler(e) {
    changeInput((prev) => !prev)
  }

 <button type='submit'>Enter</button>

Upvotes: 1

jerryurenaa
jerryurenaa

Reputation: 4704

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.

Upvotes: 35

Ragab Mohamad
Ragab Mohamad

Reputation: 708

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

Upvotes: 0

keenlabi
keenlabi

Reputation: 331

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

Upvotes: 1

BertC
BertC

Reputation: 2656

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.

Upvotes: 12

gpbaculio
gpbaculio

Reputation: 5968

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

Upvotes: 11

Mr. Dev
Mr. Dev

Reputation: 81

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
   }

Upvotes: 7

Related Questions