Bouton Retour poignée Un formulaire dynamique

https://stackoverflow.com/questions/1724739

19-09-2019
|

Question

J'ai une forme avec un tableau de champs de texte. L'utilisateur (via javascript) peut ajouter un nombre arbitraire de champs de texte à la forme. Après avoir soumis le formulaire et appuyer sur le bouton de retour le formulaire affiche uniquement les champs qui étaient sur la forme originale quand il a été rendu (tous les champs de texte ajoutés sont perdus). Quelle est la meilleure façon de permettre le bouton de retour pour rendre la forme dans l'état lorsque l'utilisateur a soumis? Toutes les idées sont les bienvenues, certaines choses que j'ai essayé sont:

Mettez les données de formulaire dans un cookie (ce ne fonctionne pas très bien pour un couple raisons, mais le plus grand tueur pour moi est que les cookies sont limités à 4 Ko taille)
Mettez les données de formulaire dans une session
Soumettre le formulaire via AJAX et gérer l'historique

Merci pour l'aide. J'ai posté une forme de test sur mon site Web à http://fishtale.org/formtest/f1.php . Ici aussi est une forme simple présentant le comportement je l'ai mentionné:

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

Ceci est similaire à une question que j'ai posté il y a un moment, meilleure façon pour le bouton Retour au formulaire données sur les congés , cependant, les éléments de cette forme sont modifiés par l'utilisateur.

La solution

Je ne peux pas trouver une bibliothèque pré-écrite pour cela, mais je suis sûr que son été résolu avant. Si je devais moi-même, je prendrais cette approche:

utiliser le motif de commande href="http://en.wikipedia.org/wiki/Command_pattern" de sorte que chaque méthode qui modifie l'interface utilisateur de la page en ajoutant contrôles invoque également une méthode AJAX pour pousser la méthode appelée (texte Javascript représentation) sur une file d'attente stockée dans la session du serveur.
Après onLoad du corps est terminé, utiliser une méthode AJAX pour interroger la session du serveur pour une file d'attente de commande pour la page que l'utilisateur est activée. Si l'on est récupéré, juste eval chaque membre de la file d'attente pour reconstruire l'interface utilisateur de la page dans le même ordre que l'utilisateur l'a fait.

Gardez à l'esprit avec cette approche que vous enregistrez pas seulement des ajouts de contrôles, mais le transfert aussi bien. Vous aurez besoin d'détenteurs d'Etat séparés pour les commandes d'entrée de l'utilisateur, comme des zones de texte (vous aurez aussi probablement besoin de session côté serveur avec accès méthode AJAX).

Autres conseils

Que diriez-vous de créer un <input type="hidden"> (sans name ou en dehors de la forme il est donc pas soumis) dans lequel vous enregistrez une liste codée de champs supplémentaires pour ajouter et leurs valeurs? Alors que le navigateur ne se souviendra pas des champs récemment ajoutés sur « retour », il se rappeler les valeurs des champs cachés qui étaient sous la forme dès le départ.

Voici un exemple qui enregistre les champs supplémentaires sur le document Décharger et les récupère sur prêts:

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

Notes:

Vous pouvez utiliser form.onsubmit au lieu de window.onbeforeunload si vous ne avez besoin de se rappeler les valeurs sur une soumission. onunload ne fonctionne pas comme certains navigateurs ont déjà enregistré les anciennes valeurs de forme avant cet événement se produit.
Dans Firefox la position de l'entrée cachée est importante. Pour une raison quelconque, si vous le mettez sous les champs dynamiquement ajoutés, Firefox devient confus dont l'entrée est et ne se rappelle pas la valeur.
Cet exemple ne fonctionne pas dans Opera. Il peut être fait de travailler dans Opera, mais il est une douleur. L'appel de l'Opéra de chargement et de déchargement des événements est incompatible, donc vous devez utiliser onsubmit à la place, ou régler le champ caché sur un intervalle d'interrogation, ou quelque chose. Pire encore, quand Opera se souvient des valeurs de forme antérieures sur le terrain, il ne fait les remplit pas jusqu'à ce que après onload a tiré! Cela provoque déjà beaucoup, beaucoup de problèmes sous forme de script. Vous pouvez contourner ce problème en mettant un petit délai d'attente dans votre onload d'attendre jusqu'à ce que les valeurs de forme sont allés si vous avez besoin d'une compatibilité Opera.

Dans les bons navigateurs, vous pouvez fonctionner parfaitement simplement par ne pas le casser .

Firefox 1.5 utilise la mise en cache en mémoire pour les pages Web entières, y compris leurs états JavaScript, pour une seule session du navigateur. Aller en arrière et en avant entre les pages visitées ne nécessite aucun chargement de la page et les états JavaScript sont conservés. source rel="noreferrer">

est prise en charge dans Opera et WebKit aussi. Cependant cache DOM n'est possible que vous en tenir aux règles:

Ne pas utiliser onunload, onbeforeunload.
Ne pas utiliser Cache-control: no-store ou must-revalidate.
En PHP, vous devez changer de session.cache_limiter patently_ridiculous (je pense qu'ils épellent nocache) à none.
```
session_cache_limiter('none');
```
Malheureusement, HTTPS est également.

Si vous ne forcez pas les navigateurs de recharger la page, ils ne seront pas. Ils gardent les DOM et ses valeurs inchangées, exactement comme RFC 2616 suggère .

Cependant , si vous cherchez place pour cacher les données, il y a bidouille incroyablement intelligent - window.name peut stocker mégaoctets de données . Il est pas envoyé au serveur, et il n'est pas partagée entre les fenêtres.

Il y a aussi des cookies Flash et HTML 5 localStorage est mis en œuvre dans IE8 et Safari 4.

Étape 2:. Le script traitement de la forme met les valeurs entrées dans un tableau et les magasins qui array dans une variable de session (ou text / db / tout ce que vous trouvez approprié)

Etape 1: Le script qui sort sous la forme ajoute un javascript (ce qui remplit le formulaire) si cette variable de session se trouve (et il efface également la variable de session)

Vous pouvez faire votre propre bouton de retour en haut de la page Web et de le rendre plus grand et plus joli que le navigateur Web standard bouton retour.

Sous le capot de votre code pourrait savoir ce que l'état précédent était et revenir à elle ou s'il n'y avait pas d'état précédent, vous pouvez peut-être appeler la fonction de retour du navigateur?

Bloquer l'utilisation du bouton de retour. Lorsque le bouton arrière est enfoncé, réengendrer la page précédente pour l'utilisateur avec les nouveaux champs inclus, soit visiblement si cela fait sens, ou caché. De cette façon, l'utilisateur peut utiliser le bouton de retour normalement et vous avez le contrôle total sur l'apparence de la page « » précédent « ».

Dans votre cas d'utilisation spécifique, il vous suffit de rendre la page avec tous les champs visibles et remplis avec les valeurs qui ont été soumises.

Ceci est un bon modèle à suivre pour tout type d'assistant de processus dans lequel vous fournissez une séquence de formulaires pour l'utilisateur de remplir et ils peuvent choisir de revenir à une forme précédente.

Pour qu'il soit parfaitement clair, je suggère que vous utilisez ces conseils sur la capture de l'événement onUnload pour déclencher la soumission du formulaire (afin que vous obtenez les valeurs entrées) et de réengendrer la page précédente que « retour » aurait affiché (sans les valeurs). La seule alternative est d'utiliser Ajax pour envoyer les valeurs saisies chaque fois que l'utilisateur quitte un champ, et ensuite chaque contrôle de la page avec le serveur via AJAX pour récupérer des valeurs supplémentaires à afficher.

Voici quelques pages supplémentaires qui prennent le contrôle de discuter Demandé la fonction du bouton en arrière et en utilisant l'événement unload la persistance des données de formulaires:

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow