Comment le contenu d'un formulaire Web peut-il être conservé pour le bouton Précédent?

Question

Lorsqu'un formulaire Web est soumis et conduit l'utilisateur sur une autre page, il arrive souvent que l'utilisateur clique sur le bouton Précédent pour le soumettre à nouveau (le formulaire est une recherche avancée dans mon cas.)

Comment puis-je conserver de manière fiable les options de formulaire sélectionnées par l'utilisateur lorsqu'il clique sur Précédent (afin qu'il ne soit pas obligé de recommencer à zéro en remplissant de nouveau le formulaire s'il ne modifie qu'un seul des nombreux éléments de formulaire?)

Dois-je enregistrer les options de formulaire dans les données de session (cookies ou côté serveur) ou existe-t-il un moyen de permettre au navigateur de gérer cela à ma place?

(Environnement PHP / JavaScript - et le site doit fonctionner sur IE6 + et Firefox2 +)

Answer 1

Je le mettrais dans la session.
Ce sera le plus fiable et même s'ils ne vont pas directement, il y aura toujours leurs options de recherche. Le placer dans le cookie fonctionnerait également, mais ne serait pas recommandé à moins qu'il ne s'agisse d'un très petit formulaire.

Answer 2

Je pense que vous êtes à la merci du navigateur. Lorsque vous répondez, le navigateur ne fait pas une nouvelle demande de contenu au serveur, il utilise le cache (dans presque tous les navigateurs que j'ai vus, de toute façon). Donc, tout ce qui est côté serveur est sorti.

Je me demandais si vous pouviez faire quelque chose de très compliqué, comme stocker le résultat de la recherche dans un cookie lors de l'événement onunload de la page de résultats, puis lire le cookie en javascript sur la page de recherche et remplir le formulaire. est juste de la spéculation, je ne sais pas si cela fonctionnerait.

Answer 3

Cela dépend du navigateur, mais dans la plupart des cas, vous n'avez rien à faire.

IE, Firefox, etc. se souviendront volontiers du contenu du formulaire de la page précédente et le montreront à nouveau lorsque vous cliquerez sur Back ... tant que vous ne ferez rien pour arrêter ce travail, par exemple la page no-cache ou la construction du formulaire entièrement à partir d'un script.

(Le fait d'ajouter des éléments dans la session risque de confondre les navigateurs si deux onglets sont ouverts sur le même formulaire. Faites très attention lorsque vous faites ce genre de chose.)

Answer 4

Le problème que vous rencontrez est que le navigateur renvoie une version en cache de la page et ne le redemandra probablement pas, ce qui signifie que l'utilisation de la session ne serait pas pertinente.

Vous pouvez toutefois utiliser AJAX pour charger les détails du formulaire précédemment envoyé dans l'événement de chargement de la page.

Answer 5

Il vous faudrait essentiellement le stocker sur votre serveur (probablement dans des variables de session, comme suggéré) après le POST. Vous devez également configurer Javascript sur la page de formulaire pour qu'il s'exécute en charge afin d'émettre un appel AJAX afin d'extraire les données de votre serveur (au format JSON, par exemple) et de pré-remplir les champs de formulaire avec les données.

Exemple de code jQuery:

$( document ).ready( function() {
  $.getJSON(
    "/getformdata.php",
    function( data ) {
      $.each( data.items, function(i,item) {
        $( '#' + item.eid ).val( item.val );
      } );
    });
} );

Votre /getformdata.php peut renvoyer des données telles que:

{
  'items': [
    {
      'eid': 'formfield1',
      'val': 'John',
    },
    {
      'eid': 'formfield2',
      'val': 'Doe',
    }
  ]
}

et il retournerait évidemment un tableau vide s'il n'y avait rien encore enregistré pour la session. Le code ci-dessus est approximatif et non testé, mais cela devrait vous donner l’idée de base.

En remarque: les versions actuelles d’Opera et de Firefox conserveront le contenu du champ de formulaire lors du retour en arrière. Votre code JS écrasera ceci, mais cela devrait être sûr.

Answer 6

Une autre option pour ajaxy (ce qui ne convient pas aux utilisateurs sans javascript) consiste à envoyer le formulaire via javascript, puis à accéder à la page de confirmation (ou à afficher le message sur le formulaire en remplaçant le bouton par un message). De cette façon, il n'y a pas de "retour". possible.

Answer 7

Pourquoi ne pas stocker les valeurs dans un cookie avant de le soumettre? Vous pouvez également inclure un horodatage ou un jeton pour indiquer quand il a été rempli. Ensuite, lors du chargement de la page, vous pouvez déterminer si vous devez renseigner les champs du cookie dans les champs ou les laisser vides, car il s'agit d'une nouvelle recherche.

Answer 8

Vous pouvez également faire tout ce qui est local en javascript. Donc, vous stockez un cookie avec la valeur de recherche et sur pageload, vous vérifiez si le cookie existe. Quelque chose comme ça:

$('#formSubmitButton').click( function() {
    var value = $('#searchbox').val();
    var days = 1;
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    document.cookie = "searchbox="+value+expires+"; path=/";
});

$(document).ready( function() {
    var nameEQ = "searchbox=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length);
   }
   $('#searchbox').val(valueC);
});

Je n'ai pas testé cela, mais cela devrait fonctionner. Vous aurez besoin de jQuery pour cela.

Les fonctions de cookie proviennent de: http://www.quirksmode.org/js/cookies. html

Je dois dire en passant que FireFox et IE ont ce comportement par défaut.