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




jquery google-chrome (8)

Adicionando para a posteridade, uma vez que isso não é relacionado ao Chrome, mas este foi o primeiro tópico que apareceu no Google ao pesquisar por este erro de envio do formulário.

No nosso caso, anexamos uma função para substituir o html div atual por uma animação de "carregamento" no envio. Como ocorreu antes do envio do formulário, não havia mais nenhum formulário ou dado a ser enviado.

Erro muito óbvio em retrospecto, mas no caso de alguém acabar aqui, pode poupar algum tempo no futuro.

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 este 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 = $('<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 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 qualquer mensagem). Também não funciona no IE 11.0 e Edge! (ambos sem qualquer mensagem)


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


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

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

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

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

E funcionou!


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



Uma coisa a observar se você ver isso no React, é que o <form> ainda tem que renderizar no DOM enquanto ele está enviando. isto é, 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, o state.submitting é configurado e a mensagem "submitting ..." é renderizada em vez do formulário. Esse erro acontece.

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

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

Você também pode resolvê-lo, aplicando um único patch no jquery-xxxjs, apenas após "try {rp;} catch (m) {}" linha 1833 neste 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.


adicione o atributo type = "button" ao botão em who's click você vê o erro, funcionou para mim.





jquery-1.7