Comment puis-je empêcher les soumissions de formulaires doubles avec jQuery ?

Prévenir les soumissions de formulaires doubles avec jQuery

Dans certains scénarios, il devient impératif d'empêcher les utilisateurs de soumettre à nouveau des formulaires pendant que le serveur est encore en train de traiter le soumission initiale. Cet article fournit une solution à ce problème en utilisant jQuery, en promettant de préserver la fonctionnalité du formulaire tout en inhibant efficacement les doubles soumissions.

Problèmes causant le code jQuery

Votre code jQuery initial désactive tout éléments du formulaire, y compris le bouton de soumission, ce qui entraîne la non-soumission du formulaire. Il est crucial de désactiver uniquement le bouton de soumission, car plusieurs boutons peuvent exister avec des fonctionnalités différentes.

Solution révisée

Une solution révisée utilise les attributs de données dans jQuery pour éviter les doubles soumissions sans modification des boutons de soumission. Voici le code amélioré :

jQuery.fn.preventDoubleSubmission = function() {
    $(this).on('submit',function(e){
        var $form = $(this);

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            e.preventDefault();
        } else {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);
        }
    });

    // Keep chainability
    return this;
};

Utilisation

Pour implémenter cette solution, invoquez simplement la fonction PreventDoubleSubmission sur l'élément de formulaire :

$('form').preventDoubleSubmission();

Gestion des formulaires AJAX

Si des formulaires spécifiques doivent autoriser plusieurs soumissions au cours d'un chargement de page, vous pouvez les exclure à l'aide d'une classe :

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

En incorporant cette solution améliorée , vous pouvez efficacement empêcher les doubles soumissions de formulaires dans vos applications Web, garantissant ainsi une expérience utilisateur transparente et évitant les incohérences potentielles des données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!