Errore “L’invio del modulo è stato annullato perché il modulo non è connesso”

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

Invio modulo annullato perché il modulo non è connesso

Il codice dietro il clic è qualcosa del genere:

this.handleExcelExporter = function(href, cols) { var 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. Non è vero? 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 il chrome (o altri browser) a funzionare come prima senza modificare alcun codice?

PS Non funziona nemmeno 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: in base agli standard HTML, se il modulo non è associato al contesto di esplorazione (documento), l’invio del modulo verrà interrotto.

    HTML SPEC vedi 4.10.21.3.2

    In Chrome 56, questa specifica è stata applicata.

    Il codice di Chrome diff vede @@ -347,9 +347,16 @@

    PS sulla tua domanda # 1. A mio parere, a differenza di Ajax, la sottomissione della forma provoca lo spostamento istantaneo della pagina.
    Quindi, mostrare ‘messaggio di avviso deprecato’ è quasi imansible.
    Penso anche che sia inaccettabile che questo serio cambiamento non sia incluso nella lista dei cambiamenti di funzionalità. Funzioni di Chrome 56: http://www.chromestatus.com/features#milestone%3D56

    È necessario assicurarsi che il modulo sia presente nel documento. È ansible aggiungere la forma al corpo.

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

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

    Così, ho provato ad accodare il modulo al corpo usando il modo jQuery:

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

    E ha funzionato!

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

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

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

    Se hai un solo button con type="submit" premi Invio invierà il modulo come previsto.

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

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

    Ho affrontato lo stesso problema in una delle nostre implementazioni.

    stavamo usando jquery.forms.js. che è un plugin 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.

    Puoi anche risolverlo, applicando una singola patch nel jquery-xxxjs basta aggiungere dopo “try {rp;} catch (m) {}” riga 1833 questo codice:

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

    Questo vale quando un modulo non fa parte del corpo e lo aggiunge.

    Ho visto questo messaggio usando angular, quindi ho appena preso method = “post” e action = “” e l’avviso era sparito.