Eviter la soumission multiple de formulaire web

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.

11 commentaires

Ne serais-t-il pas plus judicieu de mettre l'appel de la fonction sur la directive OnSubmit du formulaire ?

C'est faisable mais d'une part ce n'est pas plus simple (c'est rigoureusement identique), d'autre part il est courant que le OnSubmit du FORM soit déjà utilisé pour d'autres contrôles.

Comme d'habitude en informatique, il y a plusieurs façons de faire, l'important c'est que ça fonctionne ;-)

oui mais si il existe plusieur facon de soumettre le formulaire: bouton, touche enter, que sais-je encore..

Par cette methode je suis a peu pres sur de toutes les intercepter non?

Dam, c'est exact, c'est plus efficace. Il est aussi possible de placer l'appel à cette fonction à l'intérieur d'une autre fonction de vérification des valeurs du formulaire s'il y en a déjà une.

Si on prend l'exemple de Movable Type, je préfère cependant le placer comme décrit dans le billet, précisément parce qu'il y a plusieurs façons de soumettre le formulaire, comme par exemple en cliquant sur "prévisualiser". Or dans ce cas, je ne veux surtout pas déclencher le compteur, ce qui arriverait si je plaçais le checkSubmit dans le tag FORM.

Laisser un commentaire

En laissant un commentaire, vous acceptez la politique des commentaires de ce blog.

Archives mensuelles

Notes récentes