Cancella tutti i campi in un modulo quando si torna indietro con il pulsante Indietro del browser

Question

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 memorizza tutti gli ultimi valori e li visualizza quando torni indietro.

Maggiori chiarimenti sul motivo per cui ho bisogno di questo Ho un campo di inserimento disattivato il cui valore è generato automaticamente utilizzando un algoritmo per renderlo unico all'interno di un certo gruppo di dati. Una volta inviato il modulo e i dati vengono inseriti nel database, l'utente non dovrebbe essere in grado di utilizzare di nuovo 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 memorizza 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 si preme il pulsante Indietro del browser. Sembra che l'intera pagina venga recuperata dalla cache senza mai contattare il server se la dimensione della pagina è entro il limite della cache del browser. Come faccio a garantire che la pagina venga caricata dal server indipendentemente dalle impostazioni del browser quando si preme il pulsante Indietro del browser?

Answer 1

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

Se si deve fare qualcosa nel caso in cui l'utente prenda i tasti indietro/avanti - ascolta gli eventi BFCache pageshow e pagehide.

Una pseudo jQuery esempio:

$(window).bind("pageshow", function() { 
    // update hidden input field 
}); 

Vedi i dettagli per Gecko e WebKit implementazioni.

Answer 2

Qui di seguito i link potrebbero aiutarvi ..

Browser back button restores empty fields, Clear Form on Back Button?

Spero che questo aiuti ... Miglior fortuna

Answer 3

mi sono imbattuto in questo post durante la ricerca di un modo per cancellare l'intero modulo relativo al BFCache (cache dei pulsanti indietro/avanti) in Chrome.

In aggiunta a quanto fornito da Sim, il mio caso d'uso richiedeva che i dettagli dovessero essere combinati con Clear Form on Back Button?.

ho scoperto che il modo migliore per farlo è di permettere al modulo a comportarsi come si aspetta, e per attivare un evento:

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

Se non sta gestendo le input eventi per generare un oggetto in JavaScript, o qualcos'altro per quella materia, allora hai finito. Tuttavia, se si sta ascoltando gli eventi, allora almeno in Chrome è necessario per attivare un evento change te stesso (o qualunque evento si cura di gestire, tra cui uno personalizzato):

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

che deve essere aggiunto dopo il reset per fare del bene.

Answer 4

Questo è ciò che ha funzionato per me.

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

Inizialmente avevo questo nella sezione $ (documento) .ready del mio jQuery, che ha funzionato anche. Tuttavia, ho sentito che non tutti i browser attivano $ (document) .ready sul pulsante indietro, quindi l'ho rimosso. Non conosco i pro e i contro di questo approccio, ma ho provato su più browser su più dispositivi e non sono stati trovati problemi con questa soluzione.

Answer 5

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

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

Answer 6

Un altro modo senza JavaScript è quello di utilizzare <form autocomplete="off"> per evitare che il browser di ri-riempire il modulo con gli ultimi valori.

Vedi anche this question

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