web-dev-qa-db-fra.com

Comment désactiver le bouton soumettre après avoir cliqué?

Drupal ne semble pas empêcher plusieurs soumissions de formulaires, même sur les pages de nœuds. Ceci QA suggère de le réparer côté serveur.

Comment pourrais-je désactiver le bouton soumettre après avoir cliqué?

D'autres solutions?

7forms
13
uwe

C'est seulement en dev mais le module Hide Submit ferait l'affaire. L'une des fonctionnalités est:

Masquer (ou désactiver) le bouton d'envoi après avoir cliqué

Je viens de l'installer sur un site de développement et cela semble bien fonctionner pour les formulaires d'ajout de nœuds; lorsque vous cliquez sur le bouton Soumettre, il est masqué et remplacé par une image de chargement et un message "Veuillez patienter ...", avant que le formulaire ne soit finalement soumis. Je ne l'ai pas essayé sur d'autres formes cependant.

12
Clive

Voici une solution pour Drupal 7. Le code est une version simplifiée du module Hide Submit.

Ce code fonctionne bien même avec les boutons "Ajouter plus" et les formulaires AJAX.

Drupal.behaviors.hideSubmitButton = {
  attach: function(context) {
    $('form.node-form', context).once('hideSubmitButton', function () {
      var $form = $(this);
      $form.find('input.form-submit').click(function (e) {
        var el = $(this);
        el.after('<input type="hidden" name="' + el.attr('name') + '" value="' + el.attr('value') + '" />');
        return true;
      });
      $form.submit(function (e) {
        if (!e.isPropagationStopped()) {
          $('input.form-submit', $(this)).attr('disabled', 'disabled');
          return true;
        }  
      });
    });
  }
};
10
Eugene Fidelin

La façon la plus simple est de faire une solution javascript basée sur un thème pour désactiver le bouton après la soumission du formulaire. Dans le fichier theme.info, placez votre fichier javascript afin qu'il puisse être chargé par l'api du thème.

scripts[] = js/themename-script.js

Maintenant, dans le nom-script.js, ajoutez à la section Drupal.behaviors.themename pour ressembler à ceci:

Drupal.behaviors.themename = function()
{
  $('.node-form').submit(function(){
    $('#edit-submit').attr("disabled", "disabled");
    $('#edit-preview').attr("disabled", "disabled");
  });
}

Le flux est donc le suivant:

  1. Le thème charge le javascript
  2. Le Drupal.behaviors.themename est déclenché au chargement de la page
  3. Sur la soumission de formulaire du nœud, ajoutez le formulaire (la classe basée dans l'exemple ci-dessus, il peut être personnalisé sur le type de formulaire) désactivez les boutons d'envoi (soumettre et prévisualiser) afin qu'il ne puisse pas être cliqué à nouveau

Je suis sûr que s'il y a un traitement ajax, ce qui précède pourrait être dangereux et la soumission du formulaire ne pourrait jamais être refaite si une erreur est détectée dans la validation form_api, alors testez-le et personnalisez-le pour répondre à vos besoins. J'ai désactivé les deux boutons car vous pouviez toujours cliquer sur le bouton d'aperçu alors que le bouton d'envoi était désactivé. Évidemment, votre kilométrage peut varier.

0
Mayday