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

13

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

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

D'autres solutions?

7 forms uwe
la source
L'API Form de Drupal n'empêche-t-elle pas la double soumission grâce à sa vérification de la valeur du jeton de formulaire? Vous ne pouvez pas soumettre un formulaire avec le même jeton deux fois?
Johnathan Elmore

Réponses:

12

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.

Clive
la source
Une idée sur la façon de faire fonctionner le module de soumission de masques sur des formulaires dans vos propres modules personnalisés? J'espérais que ce serait à l'échelle du site, mais cela ne semble pas être le cas.
user785179
@ user785179 regardez comment il implémente hook_form_alter()- s'il l'utilise hook_form_FORMID_alter(), passez-le en générique hook_form_alter(). Si elle est générique hook_form_alter()avec si à l' intérieur, ajouter un peu de or« s dans ce if.
Mołot
Soyez prudent avec cette solution - le module hide submit interrompt les téléchargements ajax, provoque des problèmes de saisie semi-automatique et dans certains cas, le bouton de soumission ne fait rien du tout au premier clic. Je viens de le désinstaller d'un site.
jenlampton
@Jen Strange, je l'utilise dans des dizaines de sites depuis des années sans voir de problèmes comme ça. Peut-être avez-vous un autre module installé qui interfère avec lui
Clive
10

Voici la 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;
        }  
      });
    });
  }
};
Eugene Fidelin
la source
Je veux implémenter cela dans le thème adminimal. Faites un fichier sitename.js et copiez le code ci-dessus. Ça ne marche pas. Dois-je ajuster les choses?
Justme
@Justme où avez-vous placé votre fichier sitename.js? Si dans un module ou un sous-thème, vous devrez soit l'ajouter dans le fichier .info pour qu'il soit chargé, soit appeler drupal_add_js () ailleurs pour le mettre sur la page. Pouvez-vous le voir ajouté dans la source de la page?
jenlampton
Thxs l'a résolu. Je ne savais pas que cela devrait être entre: (fonction ($) {et}) (jQuery); dans le fichier js. Fonctionne comme un sharm !!
Justme
0

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.

Au secours
la source
2
Vous utilisez l'ancien Drupal.behaviorsstyle de déclaration; cela ne fonctionnera pas pour Drupal 7. Ce devrait être le cas Drupal.behaviors.themename = { attach: function (context, settings) { // .... Voir Gestion de JavaScript dans Drupal 7 pour plus d'informations
Clive
Style de déclaration corrigé
Eugene Fidelin
Quelles valeurs doivent être remplacées à partir de ce script 'node-form'?
pal4life
J'ai essayé de faire fonctionner ceci dans le thème adminimal mais pas de chance. Renommez le nom avec adminimal et copiez le code complet dans sitename.js et ajoutez-le au fichier d'informations sur le thème. Pourtant, je reçois facilement plus de soumissions du même formulaire.
Justme