javascript jquery google-chrome jquery-1.7

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



jquery google-chrome (12)

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.

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 admite 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)

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

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])

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.

Respuesta rápida: agregue el formulario al cuerpo.

document.body.appendChild(form);

O, si está utilizando jQuery como se $(document.body).append(form); 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.

Código de Chrome diff 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

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.

Una cosa a tener en cuenta si ve esto en React, es que el <form> todavía tiene que 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, se establece state.submitting y se muestra el mensaje "enviando ..." en lugar del formulario, entonces ocurre 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>

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ó!

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

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