Obtendo erro “Submissão do formulário cancelada porque o formulário não está conectado”

Eu tenho um site antigo com JQuery 1.7, que funciona corretamente até dois dias atrás. De repente, alguns dos meus botões não funcionam mais e, depois de clicar neles, recebo esse aviso no console:

Envio de formulário cancelado porque o formulário não está conectado

O código por trás do clique é algo assim:

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

Parece que o Chrome 56 não suporta mais esse tipo de código. Não é? Se sim, minha pergunta é:

  1. Por que isso aconteceu de repente? Sem qualquer aviso de depreciação?
  2. Qual é a solução alternativa para esse código?
  3. Existe uma maneira de forçar o chrome (ou outros navegadores) a funcionar como antes sem alterar nenhum código?

PS Ele também não funciona na versão mais recente do firefox (sem nenhuma mensagem). Também não funciona no IE 11.0 e Edge! (ambos sem qualquer mensagem)

Resposta rápida: acrescente o formulário ao corpo.

document.body.appendChild(form);

Ou, se você estiver usando o jQuery como acima: $(document.body).append(form);

Detalhes: De acordo com os padrões HTML, se o formulário não estiver associado ao contexto de navegação (documento), o envio do formulário será cancelado.

Especificação HTML ver 4.10.21.3.2

No Chrome 56, essa especificação foi aplicada.

Diferença de código do Chrome, consulte @@ -347,9 +347,16 @@

PS sobre sua pergunta # 1. Na minha opinião, ao contrário do ajax, a submissão de formulários causa movimentação instantânea de páginas.
Então, mostrando ‘mensagem de aviso preterido’ é quase impossível.
Também acho inaceitável que essa alteração séria não esteja incluída na lista de alterações de resources. Recursos do Chrome 56 – http://www.chromestatus.com/features#milestone%3D56

Você deve garantir que o formulário esteja no documento. Você pode append o formulário ao corpo.

Eu vejo que você está usando o jQuery para a boot do formulário.

Quando eu tento a resposta do @KyungHun Jeon, não funciona para mim usar o jQuery também.

Então, eu tentei append o formulário ao corpo usando o modo jQuery:

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

E funcionou!

alternativamente include event.preventDefault (); no seu handleSubmit (event) {

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

Se você estiver vendo esse erro no React JS ao tentar enviar o formulário pressionando enter, verifique se todos os seus botões no formulário que não enviam o formulário têm um type="button" .

Se você tiver apenas um button com type="submit" pressione Enter para enviar o formulário como esperado.

Referências :
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-react-forms-multiple-buttons/ https://github.com/facebook/react/issues/2093

Dependendo da resposta do KyungHun Jeon, mas o appendChild espera um nó dom, então adicione um índice ao object jquery para retornar o nó: document.body.appendChild(form[0])

Eu enfrentei o mesmo problema em uma de nossas implementações.

nós estávamos usando o jquery.forms.js. que é um plugin de formulários e está disponível aqui. http://malsup.com/jquery/form/

usamos a mesma resposta fornecida acima e colada

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

e funcionou. Obrigado.

Você também pode resolvê-lo, aplicando um único patch no jquery-xxxjs, apenas após “try {rp;} catch (m) {}” na linha 1833 deste código:

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

Isso valida quando um formulário não faz parte do corpo e o adiciona.

Eu vi esta mensagem usando angular, então eu só peguei o método = “post” e ação = “” fora, e o aviso foi embora.