Obteniendo error "El envío del formulario se canceló porque el formulario no está conectado"

Tengo un sitio web antiguo con JQuery 1.7 que funciona correctamente hasta hace dos días. De repente, algunos de mis botones ya no funcionan y, después de hacer clic en ellos, aparece esta advertencia en la consola:

Envío de formulario cancelado porque el formulario no está conectado

El código detrás del clic es algo como esto:

 this.handleExcelExporter = function(href, cols) {
   var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
   $('input[name="layout"]', form).val(JSON.stringify(cols));
   $('input[type="submit"]', form).click();
 }

Parece que Chrome 56 ya no es compatible con este tipo de código. ¿No es así? En caso afirmativo, mi pregunta es:

1. ¿Por qué sucedió esto de repente? Sin ninguna advertencia de desaprobación?
2. ¿Cuál es la solución para este código?
3. ¿Hay alguna manera de obligar a Chrome (u otros navegadores) a funcionar como antes sin cambiar ningún código?

PD : tampoco funciona en la última versión de Firefox (sin ningún mensaje). ¡Tampoco funciona en IE 11.0 y Edge! (ambos sin ningún mensaje)

Respuesta rápida: agregue el formulario al cuerpo.

document.body.appendChild(form);

O, si está utilizando jQuery como se indica arriba: $(document.body).append(form);

Detalles: de acuerdo con los estándares HTML, si el formulario no está asociado con el contexto de navegación (documento), se cancelará el envío del formulario.

HTML SPEC ver 4.10.21.3.2

En Chrome 56, se aplicó esta especificación.

Dif. De código de Chrome ver @@ -347,9 +347,16 @@

PD sobre tu pregunta # 1. En mi opinión, a diferencia de ajax, el envío de formularios provoca el movimiento instantáneo de la página.
Por lo tanto, mostrar "mensaje de advertencia obsoleto" es casi imposible.
También creo que es inaceptable que este cambio serio no esté incluido en la lista de cambios de características. Funciones de Chrome 56: www.chromestatus.com/features#milestone%3D56

si ve este error en React JS cuando intenta enviar el formulario presionando enter, asegúrese de que todos los botones del formulario que no envían el formulario tengan un type="button".

Si solo tiene uno buttoncon type="submit"presionar Enter, enviará el formulario como se esperaba.

Referencias :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

agregue el tipo de atributo = "botón" al botón de quién hace clic para ver el error, funcionó para mí.

Debe asegurarse de que el formulario esté en el documento. Puede agregar el formulario al cuerpo.

alternativamente incluir event.preventDefault (); en su handleSubmit (evento) {

ver https://facebook.github.io/react/docs/forms.html

Veo que está utilizando jQuery para la inicialización del formulario.

Cuando intento la respuesta de @ KyungHun Jeon, no funciona para mí que use jQuery también.

Entonces, intenté agregar el formulario al cuerpo usando la forma jQuery:

$(document.body).append(form);

¡Y funcionó!

Una cosa a tener en cuenta si ve esto en React, es que <form>aún debe mostrarse en el DOM mientras se envía. es decir, esto fallará

{ this.state.submitting ? 
     <div>Form is being submitted</div> :
     <form onSubmit={()=>this.setState({submitting: true}) ...>
         <button ...>
     </form>
}

Entonces, cuando se envía el formulario, state.submitting se configura y mensaje "enviando ..." en lugar del formulario, entonces se produce este error.

Mover la etiqueta del formulario fuera del condicional garantizaba que siempre estuviera allí cuando fuera necesario, es decir

<form onSubmit={...} ...>
  { this.state.submitting ? 
     <div>Form is being submitted</div> :
     <button ...>
  }
</form>

Enfrenté el mismo problema en una de nuestras implementaciones.

estábamos usando jquery.forms.js. que es un complemento de formularios y está disponible aquí. http://malsup.com/jquery/form/

utilizamos la misma respuesta proporcionada anteriormente y pegamos

$(document.body).append(form);

y funcionó. Gracias.

Dependiendo de la respuesta de KyungHun Jeon, pero appendChild espera un nodo dom, así que agregue un índice al objeto jquery para devolver el nodo: document.body.appendChild(form[0])

Agregar para la posteridad ya que esto no está relacionado con Chrome, pero este fue el primer hilo que apareció en Google al buscar este error de envío del formulario.

En nuestro caso, adjuntamos una función para reemplazar el div html actual con una animación de "carga" al enviarlo, ya que ocurrió antes de que se enviara el formulario, ya no había ningún formulario o datos para enviar.

Un error muy obvio en retrospectiva, pero en caso de que alguien termine aquí, podría ahorrarle algo de tiempo en el futuro.

He recibido este error en react.js. Si tiene un botón en el formulario que desea que actúe como un botón y no envíe el formulario, debe asignarle type = "button". De lo contrario, intenta enviar el formulario. Creo que Vaskort respondió esto con documentación que puede consultar.

Pude deshacerme del mensaje al agregar el atributo type = "button" al elemento button en vue.

También puede resolverlo, aplicando un solo parche en jquery-xxxjs simplemente agregue después de "try {rp;} catch (m) {}" línea 1833 este código:

if (r instanceof HTMLFormElement &&! r.parentNode) { r.style.display = "none"; document.body.append (r); r [p] (); }

Esto valida cuando un formulario no es parte del cuerpo y lo agrega.

Noté que recibía este error, porque mi código HTML no tenía <body>etiqueta.

Sin un <body>, cuando la document.body.appendChild(form);declaración no tenía un objeto de cuerpo para agregar.

Vi este mensaje usando angular, así que simplemente eliminé method = "post" y action = "", y la advertencia desapareció.