Form submission canceled because the form is not connected

# Table of Contents

# Form submission canceled because the form is not connected

The warning "Form submission canceled because the form is not connected" occurs when you remove the form from the page while the browser is still processing the submission event or you try to submit a form that is not attached to the document.

To resolve the issue:

Make sure to attach the form to the body with document.body.appendChild(form); if you are creating it externally.
Call the event.preventDefault() method in the form submission event to prevent the form from being removed too soon.
Set the type attribute of your button elements to button, e.g. <button type="button">.

form submission canceled because the form is not connected

Here is an example of how the warning occurs.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const form = document.createElement('form');

const btn = document.createElement('button');

form.appendChild(btn);

btn.addEventListener('click', () => {
  console.log('form submitted');
});

btn.click();

The code for this article is available on GitHub

If I start the server with npx serve . and open the Console tab in my developer tools, the "Form submission canceled because the form is not connected" warning is shown.

form submission canceled because the form is not connected

# Attach the form to the `document.body` element

If you are creating the form externally, make sure to attach it to the body element before submitting it.

index.js

Copied!
const form = document.createElement('form');

const btn = document.createElement('button');

form.appendChild(btn);

btn.innerHTML = 'Submit';

btn.addEventListener('click', () => {
  console.log('form submitted');
});

// 👇️ attach the form to the body element
document.body.appendChild(form);

The code for this article is available on GitHub

We used the appendChild method to attach the form to the body element.

The method adds a node as the last child to the element it was called on.

The form is now added to the document, so submitting it won't cause the warning.

# Call the `event.preventDefault()` method in your submit function handler

Another common cause of the warning is not calling event.preventDefault() in your submit handler which caused the form to get removed from the DOM while the browser is still processing the event.

Here is an example of how to call event.preventDefault() in your form submit event handler.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <form id="form">
      <button id="btn">Submit</button>
    </form>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const form = document.getElementById('form');

form.addEventListener('submit', event => {
  event.preventDefault();

  console.log('form submitted');
});

call event prevent default in submit event handler

The code for this article is available on GitHub

The event.preventDefault() method prevents the browser from taking the default action associated with the event (submitting and removing the form from the DOM).

Here is an example of resolving the issue by calling event.preventDefault() in a React.js application.

App.js

Copied!
import React from 'react';

export default function App() {
  const handleSubmit = event => {
    event.preventDefault();

    console.log('form submitted');
  };

  return (
    <div>
      <h2>bobbyhadz.com</h2>

      <form onSubmit={handleSubmit}>
        <button>Submit</button>
      </form>
    </div>
  );
}

call event prevent default in react js application

The code for this article is available on GitHub

We set the onSubmit prop on the form element this might also be an onClick prop set on a button element.

The key part is to take the event parameter in the event handler and call the event.preventDefault() method.

# Make sure the buttons in the form have a type of `button`

Another common cause of the warning is when the button elements in the form have a type of submit (which is the default).

Try to set the type attribute of the button elements to button and see if the warning persists.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <form id="form">
      <button id="btn1" type="button">Button 1</button>

      <button id="btn2" type="button">Button 2</button>
    </form>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', event => {
  event.preventDefault();

  console.log('form submitted');
});

Notice that we added a click event listener to the button element instead of listening for the form's submit event.

The type attribute of both button elements is set to button.

index.html

Copied!
<button id="btn1" type="button">Button 1</button>

<button id="btn2" type="button">Button 2</button>

If you have multiple buttons in the form, you can also try to set the type attribute of all but your Submit button to button.

index.html

Copied!
<form>
  <button id="btn1" type="button">Button 1</button>

  <button id="btn2" type="button">Button 2</button>

  <button id="btn3" type="submit">Submit</button>
</form>

Notice that the two buttons have a type of button and only the Submit button has a type of submit.

The submit button's click event and the form's submit event is triggered when the user clicks on the button or presses Enter.

Note that the default value of the type attribute of a button is submit, so make sure to explicitly set the type attribute to button on your other buttons.

Here is an example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <form id="form">
      <button id="btn1" type="button">Button 1</button>

      <button id="btn2" type="button">Button 2</button>

      <button id="btn3" type="submit">Submit</button>
    </form>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const form = document.getElementById('form');

form.addEventListener('submit', event => {
  event.preventDefault();

  console.log('form submitted');
});

The example listens for the form's submit event but you could also set the click event listener on the button element that has a type of submit.

index.js

Copied!
const submitBtn = document.getElementById('btn3');

submitBtn.addEventListener('click', event => {
  event.preventDefault();

  console.log('form submitted');
});

If the issue persists, try to set the type of the button that causes the warning to button.

index.html

Copied!
<button id="btn1" type="button">Button 1</button>

The code for this article is available on GitHub

Make sure that the form is not removed from the DOM while the browser is still processing the submission event.

This might happen if you hide the form while it's being submitted.

If you use React.js, check out this article to learn more about how to handle the form's submit event.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Form submission canceled because the form is not connected

# Table of Contents