Ricezione dell'errore "Invio del modulo annullato perché il modulo non è collegato"

Ho un vecchio sito Web con JQuery 1.7 che funziona correttamente fino a due giorni fa. Improvvisamente alcuni dei miei pulsanti non funzionano più e, dopo aver fatto clic su di essi, ricevo questo avviso nella console:

Invio del modulo annullato perché il modulo non è collegato

Il codice dietro il clic è qualcosa del genere:

 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();
 }

Sembra che Chrome 56 non supporti più questo tipo di codice. No? Se sì, la mia domanda è:

1. Perché è successo all'improvviso? Senza alcun avviso di deprecazione?
2. Qual è la soluzione alternativa per questo codice?
3. C'è un modo per forzare Chrome (o altri browser) a funzionare come prima senza cambiare alcun codice?

PS Non funziona neanche nell'ultima versione di Firefox (senza alcun messaggio). Inoltre non funziona in IE 11.0 e Edge! (entrambi senza alcun messaggio)

Risposta rapida: aggiungi il modulo al corpo.

document.body.appendChild(form);

Oppure, se stai usando jQuery come sopra: $(document.body).append(form);

Dettagli: secondo gli standard HTML, se il modulo non è associato al contesto di navigazione (documento), l'invio del modulo verrà interrotto.

HTML SPEC vedi 4.10.21.3.2

In Chrome 56, questa specifica è stata applicata.

Codice cromo diff vedi @@ -347,9 +347,16 @@

PS sulla tua domanda n. 1. A mio avviso, a differenza di Ajax, l'invio del modulo provoca lo spostamento istantaneo della pagina.
Pertanto, mostrare "messaggio di avviso obsoleto" è quasi impossibile.
Penso anche che sia inaccettabile che questo grave cambiamento non sia incluso nell'elenco delle modifiche alle funzionalità. Funzionalità di Chrome 56: www.chromestatus.com/features#milestone%3D56

se visualizzi questo errore in React JS quando tenti di inviare il modulo premendo Invio, assicurati che tutti i pulsanti del modulo che non inviano il modulo abbiano un type="button".

Se si dispone di un solo buttoncon type="submit"premendo Invio presenterà il modulo come previsto.

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

aggiungi l'attributo type = "button" al pulsante su chi fa clic vedi l'errore, ha funzionato per me.

È necessario assicurarsi che il modulo sia nel documento. Puoi aggiungere il modulo al corpo.

in alternativa includere event.preventDefault (); nel tuo handleSubmit (evento) {

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

Vedo che stai usando jQuery per l'inizializzazione del modulo.

Quando provo la risposta di @KyungHun Jeon, non funziona anche per me che uso jQuery.

Quindi, ho provato ad aggiungere il modulo al corpo usando il modo jQuery:

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

E ha funzionato!

Una cosa a cui fare attenzione se vedi questo in React è che <form> rendering deve ancora nel DOM durante l'invio. cioè, questo fallirà

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

Quindi, quando il modulo viene inviato, state.submittingviene impostato e viene visualizzato il messaggio "invio ..." anziché il modulo, si verifica questo errore.

Lo spostamento del tag del modulo all'esterno del condizionale ha garantito che fosse sempre presente quando necessario, ad es

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

Ho affrontato lo stesso problema in una delle nostre implementazioni.

stavamo usando jquery.forms.js. che è un plug-in per moduli e disponibile qui. http://malsup.com/jquery/form/

abbiamo usato la stessa risposta fornita sopra e incollata

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

e ha funzionato. Grazie.

A seconda della risposta di KyungHun Jeon, ma appendChild prevede un nodo dom, quindi aggiungi un indice all'oggetto jquery per restituire il nodo: document.body.appendChild(form[0])

Aggiunta di posteri in quanto non correlata a Chrome ma questa è stata la prima discussione che è stata visualizzata su Google durante la ricerca di questo errore di invio del modulo.

Nel nostro caso abbiamo allegato una funzione per sostituire l'attuale div html con un'animazione di "caricamento" al momento dell'invio - poiché si è verificata prima dell'invio del modulo non c'erano più moduli o dati da inviare.

Errore molto evidente in retrospettiva, ma nel caso in cui qualcuno finisca qui potrebbe farli risparmiare un po 'di tempo in futuro.

Ho ricevuto questo errore in React.js. Se hai un pulsante nel modulo che vuoi agire come un pulsante e non inviare il modulo, devi dargli type = "button". Altrimenti prova a inviare il modulo. Credo che Vaskort abbia risposto a questo con un po 'di documentazione che puoi consultare.

Sono stato in grado di liberarmi del messaggio aggiungendo l'attributo type = "button" all'elemento button in vue.

Puoi anche risolverlo, applicando una singola patch in jquery-xxxjs appena aggiunto dopo "provare {rp;} catch (m) {}" riga 1833 questo codice:

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

Ciò convalida quando un modulo non fa parte del corpo e lo aggiunge.

Ho notato che stavo ottenendo questo errore, perché il mio codice HTML non aveva <body>tag.

Senza un <body>, quando l' document.body.appendChild(form);istruzione non aveva un oggetto body da aggiungere.

Ho visto questo messaggio usando angolare, quindi ho appena eliminato method = "post" e action = "" e l'avviso era sparito.