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



jquery google-chrome (10)

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)



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


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


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


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á abortado.

ESP 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 questão # 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, mostrar 'mensagem de aviso reprovada' é 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


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.


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



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>

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.





jquery-1.7