Effacez tous les champs d'un formulaire en revenant avec le bouton de retour du navigateur

J'ai besoin d'un moyen d'effacer tous les champs d'un formulaire lorsqu'un utilisateur utilise le bouton Précédent du navigateur. À l'heure actuelle, le navigateur se souvient de toutes les dernières valeurs et les affiche lorsque vous revenez en arrière.

Plus de précisions sur les raisons pour lesquelles j'ai besoin de cela J'ai un champ d'entrée désactivé dont la valeur est générée automatiquement à l'aide d'un algorithme pour le rendre unique dans un certain groupe de données. Une fois que j'ai soumis le formulaire et que les données sont entrées dans la base de données, l'utilisateur ne devrait plus être en mesure d'utiliser à nouveau la même valeur pour soumettre le même formulaire. Par conséquent, j'ai désactivé le champ de saisie en premier lieu. Mais si l'utilisateur utilise le bouton Précédent du navigateur, le navigateur se souvient de la dernière valeur et la même valeur est conservée dans le champ de saisie. Par conséquent, l'utilisateur peut soumettre à nouveau le formulaire avec la même valeur.

Ce que je ne comprends pas, c'est ce qui se passe exactement lorsque vous appuyez sur le bouton de retour du navigateur. Il semble que la page entière soit récupérée du cache sans jamais contacter le serveur si la taille de la page est dans la limite du cache du navigateur. Comment puis-je m'assurer que la page est chargée à partir du serveur quel que soit le paramètre du navigateur lorsque vous appuyez sur le bouton de retour du navigateur?

Les navigateurs modernes implémentent quelque chose de connu sous le nom de cache arrière (BFCache). Lorsque vous appuyez sur le bouton Précédent / Suivant, la page réelle n'est pas rechargée (et les scripts ne sont jamais réexécutés).

Si vous devez faire quelque chose en cas de frappe de l'utilisateur sur les touches Précédent / Suivant - écoutez BFCache pageshowet les pagehideévénements:

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

Voir plus de détails sur les implémentations de Gecko et WebKit .

Une autre façon sans JavaScript consiste à <form autocomplete="off">empêcher le navigateur de remplir à nouveau le formulaire avec les dernières valeurs.

Voir aussi cette question

J'ai testé cela uniquement avec un seul <input type="text"> dans le formulaire, mais fonctionne bien dans Chrome et Firefox actuels, malheureusement pas dans IE10.

Je suis tombé sur cet article en cherchant un moyen d'effacer tout le formulaire lié au BFCache (cache du bouton Précédent / Suivant) dans Chrome.

En plus de ce que Sim a fourni, mon cas d'utilisation exigeait que les détails soient combinés avec Effacer le formulaire sur le bouton Retour? .

J'ai trouvé que la meilleure façon de le faire est de permettre au formulaire de se comporter comme il l'attend et de déclencher un événement:

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

Si vous ne gérez pas les inputévénements pour générer un objet en JavaScript, ou autre chose d'ailleurs, alors vous avez terminé. Cependant, si vous écoutez les événements, au moins dans Chrome, vous devez déclencher un changeévénement vous-même (ou quel que soit l'événement que vous souhaitez gérer, y compris un événement personnalisé):

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

Cela doit être ajouté après le resetpour faire du bien.

Si vous devez également être compatible avec les navigateurs plus anciens, l' option «pageshow» peut ne pas fonctionner. Le code suivant a fonctionné pour moi.

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

C'est ce qui a fonctionné pour moi.

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

J'avais initialement cela dans la $(document).readysection de ma jquery, qui fonctionnait également. Cependant, j'ai entendu dire que tous les navigateurs ne se déclenchent pas $(document).readyen appuyant sur le bouton de retour, alors je l'ai retiré. Je ne connais pas les avantages et les inconvénients de cette approche, mais j'ai testé sur plusieurs navigateurs et sur plusieurs appareils, et aucun problème avec cette solution n'a été trouvé.

Les liens ci-dessous peuvent vous aider.

Le bouton Retour du navigateur restaure les champs vides , Effacer le formulaire sur le bouton Retour?

J'espère que cela aide ... Meilleure chance