Comment empêcher la nouvelle soumission d'un formulaire. Resoumission des données du formulaire lors de l'actualisation de la page. Empêcher la resoumission du formulaire à l'aide d'une redirection client

À un moment donné, j'ai été intrigué par la question - comment protéger les pages du site contre le renvoi des données du formulaire lors de l'actualisation de la page (si avant cela, il y avait une soumission, bien sûr).
Chaque webmaster et développeur sait probablement que si sur le site vous avez cliqué sur le bouton "Soumettre" en remplissant un formulaire, puis après avoir soumis, si vous essayez d'actualiser la page, le navigateur affichera un message confirmant la nouvelle soumission.
À certains moments, c'est inacceptable. Par exemple, dans le cas de la forme élémentaire retour d'information... Lorsque l'utilisateur a rempli le formulaire et envoyé un message, puis, pour une raison qu'il connaît, a actualisé la page, la lettre a de nouveau disparu. Cela peut, bien sûr, ne pas être un cas aussi fatal, juste à titre d'exemple. Tout est beaucoup plus douloureux, par exemple, lors de l'envoi d'une commande dans une boutique en ligne.
Je me suis donc posé la question de trouver une solution à ce problème et je me suis rendu compte qu'il n'y avait qu'une seule solution : utiliser la redirection après avoir soumis le formulaire d'en-tête (« location : adresse »). Celles. tout est simple - après l'envoi, on appelle une redirection (vous pouvez même aller sur la même page) et c'est tout ! L'actualisation de la page sera propre, sans aucun POST et GET remplis.

Tout va bien, mais personnellement, j'ai rencontré quelques problèmes avec cela. Ils sont les suivants. Auparavant, sans utiliser de redirections, le mécanisme d'envoi de données sur mes sites fonctionnait comme suit :
L'utilisateur remplit le formulaire, clique sur "envoyer", le script accepte les données envoyées, en vérifie l'exactitude (validité, exhaustivité des données requises, etc.) et donne une réponse - soit l'opération a réussi, soit une erreur s'est produite et une liste d'erreurs (par exemple : erreur - le champ "nom" n'est pas renseigné. Et sur la page d'envoi, à son tour, un message correspondant s'affiche : l'envoi est réussi ou non réussi.
Si la soumission échoue, le formulaire reste à l'écran et ses champs sont remplis avec les données que l'utilisateur a saisies. Celles. les données sont extraites de la variable $ _POST (si Méthode POST) et entrer dans les champs correspondants (c'est-à-dire qu'ils reviennent de la poste dans leurs champs pour ne pas les ressaisir). Après tout, tout le monde est enragé lorsque vous remplissez le formulaire, et Dieu nous en préserve, vous avez indiqué quelque chose de manière incorrecte et lorsque vous essayez de vous envoyer un message s'affiche indiquant que quelque chose a été rempli de manière incorrecte, et le formulaire est mis à jour et à nouveau vide. Et vous devez le remplir à nouveau à cause d'un champ mal rempli.
Ainsi, comme je l'ai dit, en cas de remplissage infructueux, le formulaire reste rempli avec les données extraites de $ _POST, et l'utilisateur peut corriger les données incorrectes et soumettre à nouveau le formulaire.
Tout allait bien et tout fonctionnait.
Mais ensuite j'ai fait une soumission en utilisant la redirection et il s'est avéré qu'après avoir appuyé sur le bouton "envoyer", en cas de remplissage infructueux, le formulaire était mis à jour et les champs remplis ne pouvaient plus y rester, car Auparavant, ils étaient automatiquement remplis à partir du tableau $ _POST, mais maintenant, après la redirection, $ _POST s'efface comme s'il n'y avait pas d'envoi.
Mais même dans ce cas, il y avait une issue. Utilisez des séances. Celles. avant d'appeler l'en-tête, transférez les données de POST vers les variables de session et ensuite seulement, après la redirection, utilisez-les.
En conséquence, le code est devenu beaucoup plus complexe. Le débogage est devenu plus difficile car en général, il est difficile de déterminer ce qu'il advient des fonctions au moment où une redirection se produit. Si vous avez fait une erreur dans les codes (qui apparaissent exactement au moment de l'envoi), alors elle ne s'affichera même pas, car la redirection se produira et vous ne verrez même pas le message d'erreur.
En général, après l'introduction d'en-tête dans mes codes, il m'est devenu plus difficile de travailler avec mes applications. Le développement / révision / recherche de bogues est devenu plus difficile. Mais je ne peux pas non plus le refuser.
Et je me demande toujours : existe-t-il d'autres solutions plus élégantes ?

Processus d'envoi Formulaires HTML cela peut prendre quelques secondes avant que le formulaire soit soumis avec succès et que la page de réponse s'affiche. Les utilisateurs qui ne sont pas assez patients peuvent cliquer plusieurs fois sur le bouton Soumettre, ce qui entraîne la resoumission du formulaire. Ce n'est généralement pas un problème, mais dans certains cas, vous pouvez empêcher que cela se produise.
Vous trouverez ci-dessous deux astuces simples pour éviter les messages en double, vous pouvez utiliser l'une ou une combinaison de celles-ci.

Empêcher les soumissions multiples avec Javascript

Utiliser probablement Javascript pour empêcher de soumettre à nouveau le formulaire est le plus d'une manière facile... Lorsque l'utilisateur soumet le formulaire, vous pouvez désactiver le bouton "Soumettre" et changer son nom en quelque chose de plus compréhensible "Envoi, veuillez patienter..."

La première étape consiste à définir un identifiant unique identifiant, par exemple id = "myButton":

La deuxième (et dernière) étape consiste à définir deux commandes Javascript dans la balise

... La première commande désactivera le bouton Soumettre une fois le formulaire soumis, et la seconde modifiera le texte du bouton pour donner à l'utilisateur une idée de ce qui se passe. Le code suivant doit être ajouté à la balise :

La balise form ressemblera à ceci :

onsubmit = "document.getElementById (‘ myButton ’]. disabled = true ;

document.getElementById ('myButton'). value = 'Envoi, veuillez patienter ..'; ”

Et après avoir appuyé sur le bouton, il se transforme en tel

C'est tout. Cette technique devrait fonctionner sur la plupart des navigateurs (IE 5+, FireFox, Opera, Chrome).

Empêcher les soumissions multiples à l'aide de cookies

Si vous souhaitez éviter de soumettre à nouveau des formulaires tout au long de votre session de navigation (ou plus longtemps), vous pouvez envisager d'utiliser des cookies. Par exemple, modifiez votre script d'édition de formulaire pour transmettre le cookie au navigateur après le traitement du formulaire, mais avant l'envoi des en-têtes HTML. Placer ce code après la commande mail() devrait fonctionner dans la plupart des cas :

setcookie ("FormSubmitted", "1");

Vérifiez ensuite le cookie avant le traitement. S'ils ont déjà été créés, l'utilisateur a déjà soumis le formulaire dans une session de navigateur active. Ajoutez le code suivant au début du script pour traiter le formulaire.

{
mourir (« Vous ne pouvez soumettre le formulaire qu'une seule fois par session ! » );
}

C'est tout.

Voici à quoi ressemblera le script final en utilisant des cookies pour bloquer les nouvelles soumissions. Notez qu'une partie du code a été ajoutée en haut du script et que le code pour écrire le cookie est après la fonction mail ().

/ * Empêcher le renvoi * /

if (isset ($ _ COOKIE ['FormSubmitted'])
{
show_error ("Vous ne pouvez soumettre le formulaire qu'une seule fois par session !");
}

/ * Définir le destinataire de l'e-mail * /

$ monemail = " [email protégé]»;

/ * Vérification des valeurs saisies sur le formulaire à l'aide de la fonction check_input * /

$ votrenom = check_input ($ _ POST ['votrenom'], "Veuillez entrer votre nom");
$ subject = check_input ($ _ POST ['subject'], "Post subject");
$ email = check_input ($ _ POST ['email']);
$ site web = check_input ($ _ POST ['site web']);
$ likeit = check_input ($ _ POST ['likeit']);
$ how_find = check_input ($ _ POST ['comment']);
$ comments = check_input ($ _ POST ['commentaires'], "Vos commentaires");

/ * Si une adresse e-mail invalide est saisie, afficher un message d'erreur * /
if (! preg_match ("/ ( [email protégé]+. +) / ", $ Courriel))
{
show_error ("Vous avez entré un mauvais e-mail");
}

/ * Si l'URL est erronée, définissez la variable de site Web $ sur vide * /
if (! preg_match ("/^(https?://++.+)/i", $ site Web))
{
$ site Web = ";
}

/ * Préparer un e-mail * /

$ message = « Bonjour !
Vos coordonnées ont été envoyées :
Nom : $ votre nom
Courriel : $ courriel
URL : $ site Web
Aimez-vous le site Web? $ j'aime
Comment as-tu trouvé le site web? $ how_find

À un moment donné, j'ai été intrigué par la question - comment protéger les pages du site contre le renvoi des données du formulaire lors de l'actualisation de la page (si avant cela, il y avait une soumission, bien sûr).
Chaque webmaster et développeur sait probablement que si sur le site vous avez cliqué sur le bouton "Soumettre" en remplissant un formulaire, puis après avoir soumis, si vous essayez d'actualiser la page, le navigateur affichera un message confirmant la nouvelle soumission.
À certains moments, c'est inacceptable. Par exemple, dans le cas d'un formulaire de rétroaction élémentaire. Lorsque l'utilisateur a rempli le formulaire et envoyé un message, puis, pour une raison qu'il connaît, a actualisé la page, la lettre a de nouveau disparu. Cela peut, bien sûr, ne pas être un cas aussi fatal, juste à titre d'exemple. Tout est beaucoup plus douloureux, par exemple, lors de l'envoi d'une commande dans une boutique en ligne.
Je me suis donc posé la question de trouver une solution à ce problème et je me suis rendu compte qu'il n'y avait qu'une seule solution : utiliser la redirection après avoir soumis le formulaire d'en-tête (« location : adresse »). Celles. tout est simple - après l'envoi, on appelle une redirection (vous pouvez même aller sur la même page) et c'est tout ! L'actualisation de la page sera propre, sans aucun POST et GET remplis.

Tout va bien, mais personnellement, j'ai rencontré quelques problèmes avec cela. Ils sont les suivants. Auparavant, sans utiliser de redirections, le mécanisme d'envoi de données sur mes sites fonctionnait comme suit :
L'utilisateur remplit le formulaire, clique sur "envoyer", le script accepte les données envoyées, en vérifie l'exactitude (validité, exhaustivité des données requises, etc.) et donne une réponse - soit l'opération a réussi, soit une erreur s'est produite et une liste d'erreurs (par exemple : erreur - le champ "nom" n'est pas renseigné. Et sur la page d'envoi, à son tour, un message correspondant s'affiche : l'envoi est réussi ou non réussi.
Si la soumission échoue, le formulaire reste à l'écran et ses champs sont remplis avec les données que l'utilisateur a saisies. Celles. les données sont extraites de la variable $ _POST (si la méthode POST est utilisée) et placées dans les champs appropriés (c'est-à-dire renvoyés du post à leurs champs pour ne pas les ressaisir). Après tout, tout le monde est enragé lorsque vous remplissez le formulaire, et Dieu nous en préserve, vous avez indiqué quelque chose de manière incorrecte et lorsque vous essayez de vous envoyer un message s'affiche indiquant que quelque chose a été rempli de manière incorrecte, et le formulaire est mis à jour et à nouveau vide. Et vous devez le remplir à nouveau à cause d'un champ mal rempli.
Ainsi, comme je l'ai dit, en cas de remplissage infructueux, le formulaire reste rempli avec les données extraites de $ _POST, et l'utilisateur peut corriger les données incorrectes et soumettre à nouveau le formulaire.
Tout allait bien et tout fonctionnait.
Mais ensuite j'ai fait une soumission en utilisant la redirection et il s'est avéré qu'après avoir appuyé sur le bouton "envoyer", en cas de remplissage infructueux, le formulaire était mis à jour et les champs remplis ne pouvaient plus y rester, car Auparavant, ils étaient automatiquement remplis à partir du tableau $ _POST, mais maintenant, après la redirection, $ _POST s'efface comme s'il n'y avait pas d'envoi.
Mais même dans ce cas, il y avait une issue. Utilisez des séances. Celles. avant d'appeler l'en-tête, transférez les données de POST vers les variables de session et ensuite seulement, après la redirection, utilisez-les.
En conséquence, le code est devenu beaucoup plus complexe. Le débogage est devenu plus difficile car en général, il est difficile de déterminer ce qu'il advient des fonctions au moment où une redirection se produit. Si vous avez fait une erreur dans les codes (qui apparaissent exactement au moment de l'envoi), alors elle ne s'affichera même pas, car la redirection se produira et vous ne verrez même pas le message d'erreur.
En général, après l'introduction d'en-tête dans mes codes, il m'est devenu plus difficile de travailler avec mes applications. Le développement / révision / recherche de bogues est devenu plus difficile. Mais je ne peux pas non plus le refuser.
Et je me demande toujours : existe-t-il d'autres solutions plus élégantes ?