web-dev-qa-db-fra.com

Comment gérez-vous le bouton "Annuler"?

Je crée actuellement un autre formulaire et, comme d'habitude, je ne sais pas comment implémenter le bouton "Annuler" (ou "Précédent") à côté du bouton "Envoyer", qui permet à l'utilisateur d'oublier ce formulaire et de revenir en arrière. à la page de liste.

Il y a évidemment beaucoup de façons: vous pouvez utiliser un simple bouton ou un lien (ou n’importe quelle balise avec les balises onclick et les styles appropriés) et tous peuvent utiliser JavaScript pour revenir en arrière dans l’historique ou allez simplement à une URL donnée.

Chaque méthode a son avantage: le bouton back() permet d’accéder directement à l’emplacement de l’utilisateur (sur la 3ème page de la liste triée par nom, par exemple), mais peut ouvrir la fenêtre "confirmer le renvoi". D'autre part, aller à une URL est "plus propre", mais signifie soit aller à une adresse générique (1ère page de la liste, tri par défaut), soit conserver l'URL précédente comme paramètre caché, si l'on veut aller exactement à la même page (3ème page triée par nom).

Comment gérez-vous cela? J'utilise habituellement la solution history.back(), parce que dans mon cas, elle fait généralement l'affaire, mais cette méthode peut présenter certains inconvénients.

1
Wookai

Utiliser uniquement du JavaScript pour cela est une mauvaise solution car cela désautorise les utilisateurs sans JavaScript activé. JavaScript doit toujours améliorer la solution, ne le soyez pas. (Voir amélioration progressive ).

Si l'utilisateur appuie sur un bouton d'annulation, votre script côté serveur doit savoir où le ramener. Si cette page nécessitait la soumission d'un formulaire, vous devez retravailler votre site pour qu'il utilise les redirections après la soumission du formulaire afin d'empêcher la soumission de nouveaux formulaires dans ces cas. (Cela s'appelle POST/Redirect/GET ).

Vous pouvez ensuite utiliser JavaScript pour améliorer ceci pour les utilisateurs qui ont activé JavaScript pour le rendre plus rapide (comme pour obtenir le contenu de la page précédente en utilisant Ajax et en l'affichant à nouveau).

1
John Conde

Pour les formulaires à une étape, j'utiliserais un lien. Vous pouvez obtenir l'URL d'origine de l'utilisateur à l'aide de l'en-tête REFERER et du lien "Annuler" vers cette page. Si le formulaire comporte plusieurs étapes, définissez un cookie avec l'URL de référence et utilisez-le pour le lien Annuler.

Cependant, avec un formulaire à plusieurs étapes, vous pouvez stocker des données partielles dans la base de données. Dans ce cas, il est avantageux d’utiliser un bouton, qui soumet une sorte d’identifiant et peut supprimer ces données avant de rediriger vers l’emplacement où se trouvait l’utilisateur. (Bien que vous deviez quand même effacer les données périodiquement au cas où l'utilisateur fermerait son navigateur.)

Comme l'a souligné John Conde, lors de la soumission du formulaire, vous devez utiliser une redirection afin d'éviter le problème POSTDATA.

1
DisgruntledGoat

En plus des conseils de @ JohnConde et DisgruntledGoat (ce qui est bon), je suggérerais d'afficher des chapelures ou similaires pour fournir une section utile "lien en arrière" (peut également être générée côté serveur par le référant).

Cela élimine l'ambiguïté du but de 'retour', l'utilisateur a eu un indice visuel (généralement au-dessus de la forme) indiquant où le système pense qu'il se trouve (mais dans la pratique, ne vous attendez pas à utiliser les liens réels). POST/Redirect/GET arrête la rupture du bouton Précédent, renforçant ce comportement à tous les niveaux.

Une approche concurrente de cette conception, utilisée sur des sites plus cavaliers et fréquentés par des "utilisateurs expérimentés", consiste à responsabiliser vos utilisateurs par le biais de liens (ou de widgets Ajax) leur permettant de manipuler le système et de supprimer le concept de "retour" (bien que non supprimer des fonctionnalités telles que annuler).

En bout de ligne, vous souhaiterez (sauf dans de rares cas) vouloir "revenir" ou en supprimer le besoin. Le laisser dans les limbes peut effrayer les utilisateurs lorsqu'il réagit de manière imprévisible.

1
Metalshark