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

Une réponse à “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 *