Debounce clique lors de la soumission d'un formulaire Web

Question

Un système back-end mal écrit, avec lequel nous communiquons, rencontre des difficultés pour gérer la charge que nous produisons. Pendant qu'ils résolvent leurs problèmes de charge, nous essayons de réduire la charge supplémentaire générée, notamment que le système back-end continue d'essayer de gérer une soumission de formulaire même si une autre soumission a été envoyée par le même utilisateur.

Nous avons remarqué que les utilisateurs double-cliquent sur le bouton de soumission de formulaire. Je dois dissocier ces clics et empêcher la soumission d'un second formulaire.
Mon approche (avec Prototype) place un onSubmit sur le formulaire, qui appelle la fonction suivante, qui masque le bouton de soumission du formulaire et affiche un message "Chargement en cours ...". div .

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

Le problème que j’ai rencontré avec cette approche est que si j’utilise un gif animé dans la rubrique "Chargement en cours ..." div , il se charge bien mais ne s'anime pas pendant la soumission du formulaire.

Existe-t-il un meilleur moyen de supprimer le rebond et de continuer à afficher une animation sur la page en attendant que le résultat du formulaire soit (enfin) chargé?

Answer 1

Si vous avez jQuery à portée de main, attachez un événement click () qui désactive le bouton après la soumission initiale -

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

ce genre de chose.

Answer 2

À l'aide de Prototype, vous pouvez utiliser ce code pour vérifier si un formulaire a été soumis et désactiver tous les boutons de soumission, le cas échéant:

document.observe( 'dom:loaded', function() { // when document is loaded
    $( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

Cela devrait aider les utilisateurs qui cliquent deux fois sur les boutons d'envoi. Toutefois, il sera toujours possible de soumettre le formulaire de toute autre manière (par exemple, en appuyant sur Entrée dans le champ de texte). Pour éviter cela, vous devez commencer à surveiller toute soumission de formulaire après la première et l’arrêter:

document.observe( 'dom:loaded', function() {
    $( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $( 'input[type="submit"]' ).invoke( 'disable' );
            $( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );

Answer 3

Toutes les bonnes suggestions ci-dessus. Si vous voulez vraiment "faire rebondir" comme vous le dites, alors j'ai une excellente fonction pour cela. Plus de détails à l'adresse unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

Answer 4

Vous pouvez essayer de définir le paramètre "désactivé". drapeau sur l'élément input (type = submit), plutôt que de changer le style. Cela devrait complètement arrêter le côté navigateur.

Voir: http://www.prototypejs.org/api/form / element # method-disable

Answer 5

Envoyez le formulaire avec AJAX et le GIF s'animera.