François Nonnenmacher (FR) | EN

Un problème que l'on rencontre parfois sur les weblogues est la duplication d'un même commentaire. Il peut arriver en effet assez facilement que l'on clique deux fois de suite sur envoyer et l'on se retrouve avec deux copies au lieu d'une. Je vous propose ici une méthode générique qui prévient la soumission multiple d'un formulaire web quelconque.

Un bon principe de design concernant les formulaires web est de placer la charge des contrôles sur le client (le navigateur) plutôt que sur le serveur, en utilisant des scripts (ECMAScript, ex javascript) inclus dans les pages et exécuté par le navigateur. L'avantage principal de cette méthode est de ne pas solliciter le serveur en évitant un aller-retour inutile. Un autre avantage, notamment dans le cadre de weblogues, est qu'elle ne demande aucune modification du logiciel côté serveur, elle est donc parfaitement agnostique quant à la technologie que vous utilisez côté serveur.

L'inconvénient d'une telle méthode est qu'elle suppose que le client exécute le code en question. Notez que dans le cas d'applications critiques, il faut toujours effectuer des contrôles au niveau du serveur, car on ne peut jamais faire confiance aux données qui arrivent depuis un formulaire web.

Un formulaire de commentaires n'étant pas une application particulièrement critique, et le faible pourcentage de clients qui n'exécuteront pas le script n'étant pas un point de blocage, la méthode suivante peut donc s'appliquer sans inconvénient notable sur un weblogue.

Ajoutez le script suivant dans l'entête de la page contenant le formulaire (dans le bloc HEAD) ou, de préférence, dans un fichier inclus si vous en utilisez un :

<script language="JavaScript" type="text/javascript">
   var submitcount=0;

   function checkSubmit() {
      if (submitcount == 0)
      {
      submitcount++;
      return true;
      }
      else
      {
      return false;
      }
   }
</script>

Ensuite, dans le formulaire que vous voulez protéger contre une double soumission, identifiez l'élément "submit" qui est utilisé pour la confirmation (attention, il peut y avoir plusieurs éléments qui ont l'attribut type="submit", il n'est pas nécessaire de tous les modifier) :

<input type="submit" ... />

Ajoutez-lui onClick="return checkSubmit()" ce qui donne pour l'exemple précédent :

<input type="submit" ... onClick="return checkSubmit()" />

Et voilà, votre formulaire ne pourra pas être soumis plus d'une fois par erreur.

P.S. : Dans les commentaires, Damien suggère de placer l'appel dans un onSubmit en attribut du tag FORM, ce qui permet de capturer tous les appels à la soumission du formulaire (par exemple l'appui de la touche "retour"). C'est judicieux lorsqu'il est souhaitable de couvrir tous les cas de figures. Cependant, si l'on prend l'exemple de Movable Type et d'autres système de weblogues, il n'est pas souhaitable de surveiller toutes les soumissions, comme par exemple la prévisualisation, et l'événement onSubmit est déjà utilisé par MT pour d'autres vérifications. La méthode que je décris ici n'est certainement pas infaillible, d'ailleurs je vous invite à la tester ici en essayant de faire une double soumission d'un même commentaire (note : pas la peine d'essayer le truc de recharger la page et la soumettre à nouveau, c'est de la triche).

N.B. : je ne suis pas l'auteur de cette méthode. Je l'utilise sur plusieurs sites depuis longtemps et je ne sais vraiment plus où je l'ai trouvée.