Comment empêcher les soumissions de formulaires doubles dans jQuery : quelles techniques fonctionnent le mieux ?

Comment empêcher les soumissions de formulaires doubles dans jQuery

Lorsque vous travaillez avec des formulaires qui prennent beaucoup de temps à traiter, empêchant les utilisateurs de accidentellement il est crucial de soumettre le formulaire plusieurs fois. Cet article décrit une méthode pour y parvenir à l'aide de jQuery.

Tentative initiale

L'approche initiale impliquait la désactivation de toutes les entrées et boutons lors de la soumission du formulaire. Cependant, cette technique a eu pour conséquence que le formulaire n'a pas été soumis dans Firefox.

Solution améliorée

La solution réside dans la désactivation sélective uniquement des boutons de soumission, car la désactivation de toutes les entrées peut interférer avec la soumission du formulaire. Le code jQuery suivant accomplit cela :

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

Approche alternative du plugin

Une autre option consiste à utiliser le plugin jQuery ci-dessous, qui utilise la fonction data() de jQuery pour marquer formulaires tels que soumis, empêchant les soumissions ultérieures.

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

    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });

  return this;
};

Utilisation :

$('form').preventDoubleSubmission();

À l'exclusion des formulaires AJAX

Si votre candidature contient des formulaires AJAX qui devrait autoriser plusieurs soumissions, vous pouvez les exclure en ajoutant une classe, comme indiqué ci-dessous :

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

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!