Cancella tutti i campi in un modulo tornando indietro con il pulsante Indietro del browser

Ho bisogno di un modo per cancellare tutti i campi all'interno di un modulo quando un utente utilizza il pulsante Indietro del browser. In questo momento, il browser ricorda tutti gli ultimi valori e li visualizza quando torni indietro.

Ulteriori chiarimenti sul motivo per cui ho bisogno di questo ho un campo di input disabilitato il cui valore viene generato automaticamente utilizzando un algoritmo per renderlo unico all'interno di un determinato gruppo di dati. Una volta inviato il modulo e immessi i dati nel database, l'utente non dovrebbe essere in grado di utilizzare nuovamente lo stesso valore per inviare lo stesso modulo. Quindi ho disabilitato il campo di input in primo luogo. Ma se l'utente utilizza il pulsante Indietro del browser, il browser ricorda l'ultimo valore e lo stesso valore viene mantenuto nel campo di input. Quindi l'utente può inviare nuovamente il modulo con lo stesso valore.

Quello che non capisco è cosa succede esattamente quando premi il pulsante Indietro del browser. Sembra che l'intera pagina venga recuperata dalla cache senza mai contattare il server se la dimensione della pagina rientra nel limite della cache del browser. Come posso assicurarmi che la pagina venga caricata dal server indipendentemente dalle impostazioni del browser quando premo il pulsante Indietro del browser?

I browser moderni implementano qualcosa noto come cache back-forward (BFCache). Quando si preme il pulsante Indietro / Avanti, la pagina effettiva non viene ricaricata (e gli script non vengono mai rieseguiti).

Se devi fare qualcosa in caso l'utente prema i tasti Indietro / Avanti, ascolta BFCache pageshowed pagehideeventi:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

Ulteriori dettagli sulle implementazioni di Gecko e WebKit .

Un altro modo senza JavaScript consiste nell'impedire <form autocomplete="off">al browser di riempire nuovamente il modulo con gli ultimi valori.

Vedi anche questa domanda

Testato solo con un singolo <input type="text"> all'interno del modulo, ma funziona bene negli attuali Chrome e Firefox, purtroppo non in IE10.

Mi sono imbattuto in questo post mentre cercavo un modo per cancellare l'intero modulo relativo a BFCache (cache del pulsante Indietro / Avanti) in Chrome.

Oltre a ciò che Sim ha fornito, il mio caso d'uso richiedeva che i dettagli fossero combinati con Cancella modulo sul pulsante Indietro? .

Ho scoperto che il modo migliore per farlo è consentire al modulo di comportarsi come previsto e attivare un evento:

$(window).bind("pageshow", function() {
    var form = $('form'); 
    // let the browser natively reset defaults
    form[0].reset();
});

Se non stai gestendo gli inputeventi per generare un oggetto in JavaScript, o qualcos'altro per quella materia, allora hai finito. Tuttavia, se stai ascoltando gli eventi, almeno in Chrome devi attivare changetu stesso un evento (o qualsiasi evento tu voglia gestire, incluso uno personalizzato):

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');

Questo deve essere aggiunto dopo il resetper fare del bene.

Se è necessario essere compatibili anche con i browser meno recenti, l' opzione "pageshow" potrebbe non funzionare. Il codice seguente ha funzionato per me.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

Questo è ciò che ha funzionato per me.

$(window).bind("pageshow", function() {
    $("#id").val('');
    $("#another_id").val('');
});

Inizialmente avevo questo nella $(document).readysezione del mio jquery, che funzionava anche. Tuttavia, ho sentito che non tutti i browser si attivano $(document).readypremendo il pulsante Indietro, quindi l'ho rimosso. Non conosco i pro e i contro di questo approccio, ma ho testato su più browser e su più dispositivi e non sono stati trovati problemi con questa soluzione.

I link sottostanti potrebbero aiutarti ..

Il pulsante Indietro del browser ripristina i campi vuoti , Cancella modulo sul pulsante Indietro?

Spero che questo aiuti ... Buona fortuna