Comment empêcher la soumission de double formulaire dans jQuery ?

Empêcher la resoumission d'un formulaire dans jQuery

Lors de la soumission d'un formulaire, il est crucial d'empêcher les utilisateurs de soumettre accidentellement deux fois pendant un délai de traitement du serveur. Une solution courante consiste à désactiver les éléments de formulaire lors de la soumission. Cependant, cette approche peut désactiver des éléments qui ne devraient pas l'être, tels que les entrées contenant des données essentielles.

Désactiver uniquement les boutons de soumission

Pour désactiver spécifiquement les boutons de soumission et éviter toute interférence lors de la soumission du formulaire, utilisez le code suivant :

$('button[type=submit], input[type=submit]').prop('disabled',true);

Plugin jQuery pour la prévention des doubles soumissions

Une autre solution efficace consiste à créer un plugin jQuery qui utilise les données ( ) pour marquer les formulaires comme déjà soumis :

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;
};

Pour utiliser le plugin, appliquez-le simplement à votre formulaire :

$('form').preventDoubleSubmission();

Excluant les formulaires Ajax

Si vous avez des formulaires AJAX qui nécessitent plusieurs soumissions, excluez-les en ajoutant une classe et en utilisant le sélecteur suivant :

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

En utilisant ces techniques, vous pouvez éviter les soumissions de formulaires doubles et garantir un serveur fluide. traitement.

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!