Obtendo o erro "Envio do formulário cancelado porque o formulário não está conectado"

Eu tenho um site antigo com o 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 este aviso no console:

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

O código por trás do clique é mais ou menos assim:

 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 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 reprovaçã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: Também não funciona na versão mais recente do firefox (sem nenhuma mensagem). Também não funciona no IE 11.0 & Edge! (ambos sem nenhuma mensagem)

Resposta rápida: anexe 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á abortado.

SPEC HTML, consulte 4.10.21.3.2

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

Dif. De código do Chrome, consulte @@ -347,9 +347,16 @@

PS sobre sua pergunta # 1. Na minha opinião, ao contrário do ajax, o envio de formulários causa movimentação instantânea da página.
Portanto, mostrar 'mensagem de aviso obsoleta' é 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 recursos. Recursos do Chrome 56 - www.chromestatus.com/features#milestone%3D56

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 a type="button".

Se você tiver apenas um buttoncom o type="submit"pressionar Enter irá apresentar o formulário conforme o esperado.

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

adicione o tipo de atributo = "botão" ao botão em quem está clicando, você vê o erro, funcionou para mim.

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

alternativamente, inclua event.preventDefault (); no seu handleSubmit (event) {

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

Vejo que você está usando jQuery para a inicialização do formulário.

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

Então, tentei anexar o formulário ao corpo usando a maneira jQuery:

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

E funcionou!

Uma coisa a se observar se você vê isso no React é que o <form>ainda precisa renderizar no DOM enquanto está enviando. ou seja, isso falhará

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

Portanto, quando o formulário é enviado, state.submittingé definido e a mensagem "enviando ..." é renderizada em vez do formulário, esse erro ocorre.

Mover a tag do formulário para fora do condicional garantiu que ela estivesse sempre lá quando necessário, ou seja,

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

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

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

usamos a mesma resposta fornecida acima e colamos

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

e funcionou.Obrigado.

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

Adição à posteridade, uma vez que isso não está relacionado ao Chrome, mas esse foi o primeiro segmento que apareceu no Google ao pesquisar esse erro de envio de formulário.

No nosso caso, anexamos uma função para substituir o div html atual por uma animação "loading" no envio - uma vez que ocorreu antes do envio do formulário, não havia mais nenhum formulário ou dados a serem enviados.

Erro muito óbvio em retrospecto, mas caso alguém acabe aqui, isso poderá economizar algum tempo no futuro.

Eu recebi esse erro no react.js. Se você possui um botão no formulário que deseja agir como um botão e não envia o formulário, digite-o = "button". Caso contrário, ele tenta enviar o formulário. Acredito que o vaskort respondeu isso com alguma documentação que você pode conferir.

Consegui me livrar da mensagem usando a adição do atributo type = "button" ao elemento button no vue.

Você também pode resolvê-lo, aplicando um único patch no jquery-xxxjs e adicione depois da linha "try {rp;} catch (m) {}" 1833 este 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.

Percebi que estava recebendo esse erro, porque meu código HTML não tinha <body>tag.

Sem um <body>, quando a document.body.appendChild(form);instrução não tinha um objeto de corpo a ser acrescentado.

Vi essa mensagem usando angular, então tirei method = "post" e action = "", e o aviso sumiu.