Bloquer les boutons d’un formulaire pendant une période donnée

Dans toutes nos applications, on retrouvera LE fameux utilisateur qui clique plusieurs fois sur le bouton “Envoyer la demande”, ce qui aura pour effet de créer des doublons, lancer des processus en double, voir pire … 

Différentes solutions s’offrent à nous afin d’éviter ces comportements potentiellement désastreux. Tout d’abord, il est possible d’utiliser l’action de règle disable a form control lors du clic pour éviter ces clics multiples. L’inconvénient de cette méthode : il faut penser à réactiver le bouton si certains contrôles ne passent pas (exemple : champs obligatoires non renseignés) et c’est donc un peu fastidieux, mais cela fonctionne et ne va pas à l’encontre des bonnes pratiques.

La seconde méthode, si vous n’êtes pas allergique à l’injection de quelques microscopiques lignes de code, va être plus rapide à mettre en place et être basée sur du javascript (vous pouvez vous référer à cet article afin de voir comment injecter du JavaScript dans un formulaire). Il suffit alors d’exécuter le JavaScript suivant pour bloquer tous les boutons du formulaire pendant une période donnée :

<script>
$(".SourceCode-Forms-Controls-Web-Button").each(function(){
$(this).prop('disabled',true);}); 
setTimeout(function(){$(".SourceCode-Forms-Controls-Web-Button").each(
function(){$(this).prop('disabled',false);})}
, 5000);
</script>

Note : Le temps de blocage, en milliseconde (5000 dans l’exemple) peut être modifié en fonction de la durée de blocage souhaitée.

 Bonne pratique de conception : créer un bouton caché “btn_LockButtons” qui contiendra l’exécution du javascript, et qui sera appelé à tous les endroits où l’on souhaite bloquer les boutons.

pierre

Chef de projet chez K2 France, ex consultant solution et blogueur à ses heures perdues!

Twitter: @Pierrot_12

Linkedin: Pierre NOILHAN

One thought to “Bloquer les boutons d’un formulaire pendant une période donnée”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *