Wie deaktiviere ich die Submit-Schaltfläche, nachdem ich auf geklickt habe?


13

Drupal scheint nicht zu verhindern, dass mehrere Formulare gesendet werden, auch nicht auf Knotenseiten. In dieser Qualitätssicherung wird vorgeschlagen , sie auf der Serverseite zu beheben.

Wie kann ich die Senden-Schaltfläche deaktivieren, nachdem ich auf geklickt habe?

Irgendwelche anderen Lösungen?


Verhindert die Formular-API von Drupal nicht die doppelte Übermittlung dank der Überprüfung des Formular-Token-Werts? Kann ein Formular nicht zweimal mit demselben Token gesendet werden?
Johnathan Elmore

Antworten:


12

Es ist nur in dev, aber das Hide Submit- Modul würde den Trick machen. Eines der Merkmale ist:

Verbergen (oder deaktivieren) Sie die Senden-Schaltfläche, nachdem Sie darauf geklickt haben

Ich habe es gerade auf einer Dev-Site installiert und es scheint gut für Node-Add-Formulare zu funktionieren. Wenn Sie auf die Schaltfläche "Senden" klicken, wird diese ausgeblendet und durch ein Ladebild und die Meldung "Bitte warten ..." ersetzt, bevor das Formular endgültig gesendet wird. Ich habe es auf keinen anderen Formen versucht.


Haben Sie eine Idee, wie Sie das Modul hide submit dazu bringen können, Formulare in Ihren eigenen benutzerdefinierten Modulen zu bearbeiten? Ich hatte gehofft, dass es eine Site-weite sein würde, aber das scheint nicht der Fall zu sein.
user785179

@ user785179 sehen Sie, wie es implementiert hook_form_alter()- wenn es verwendet wird hook_form_FORMID_alter(), schalten Sie es auf generisch um hook_form_alter(). Wenn es generisch hook_form_alter()mit if inside ist, fügen Sie einige ordavon hinzu if.
Mołot

Seien Sie vorsichtig mit dieser Lösung - das Modul zum Ausblenden von Übermittlungen unterbricht Ajax-Uploads, führt zu Problemen bei der automatischen Vervollständigung und in einigen Fällen dazu, dass die Übermittlungsschaltfläche beim ersten Klicken überhaupt nichts unternimmt. Ich musste es nur von einer Site deinstallieren.
Jenlampton

@Jen Seltsam, ich benutze es seit Jahren auf Dutzenden von Websites, ohne solche Probleme zu sehen. Vielleicht haben Sie ein anderes Modul installiert, das es stört
Clive

10

Hier ist die Lösung für Drupal 7. Code ist eine vereinfachte Version des Hide Submit-Moduls.

Dieser Code funktioniert auch mit "Weitere hinzufügen" -Schaltflächen und AJAX-Formularen.

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

Ich möchte dies im Adminimalthema implementieren. Erstellte eine Datei sitename.js und kopierte den obigen Code hinein. Es funktioniert nicht. Soll ich die Dinge anpassen?
Justme

@Justme wo hast du deine sitename.js Datei abgelegt? Wenn Sie sich in einem Modul oder einem Unterthema befinden, müssen Sie es entweder zur .info-Datei hinzufügen, damit es geladen wird, oder Sie rufen drupal_add_js () an einer anderen Stelle auf, um es auf der Seite anzuzeigen. Können Sie sehen, dass es in der Seitenquelle hinzugefügt wird?
Jenlampton

Thxs löste es. Ich wusste nicht, dass dies zwischen (function ($) {und}) (jQuery) liegen sollte. in der js datei. Funktioniert wie ein Sharm !!
Justme

0

Der einfachste Weg ist eine themenbasierte Javascript-Lösung, um die Schaltfläche nach dem Absenden des Formulars zu deaktivieren. Fügen Sie in die Datei theme.info Ihre Javascript-Datei ein, damit sie von der Theme-API geladen werden kann.

scripts[] = js/themename-script.js

Fügen Sie nun im Abschnitt themename-script.js im Abschnitt Drupal.behaviors.themename Folgendes hinzu:

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

Der Ablauf ist also wie folgt:

  1. Theme lädt das Javascript
  2. Der Name Drupal.behaviors.themename wird beim Laden der Seite ausgelöst
  3. Deaktivieren Sie beim Senden des Formulars des Knotens Formular hinzufügen (Klasse im obigen Beispiel, kann an den Formulartyp angepasst werden) die Senden-Schaltflächen (Senden und Vorschau), damit nicht erneut darauf geklickt werden kann

Ich bin mir sicher, dass bei einer Ajax-Verarbeitung das oben Genannte gefährlich sein könnte und das Senden des Formulars nie wieder möglich ist, wenn ein Fehler in der form_api-Validierung auftritt. Testen Sie dies und passen Sie es an Ihre Bedürfnisse an. Ich habe beide Schaltflächen deaktiviert, da Sie immer noch auf die Vorschau-Schaltfläche klicken konnten, während die Senden-Schaltfläche deaktiviert war. Offensichtlich variieren Ihre Laufleistung meine.


2
Sie verwenden den alten Drupal.behaviorsDeklarationsstil. es wird nicht für Drupal 7 funktionieren. Es müsste sein Drupal.behaviors.themename = { attach: function (context, settings) { // .... Weitere Informationen finden Sie unter Verwalten von JavaScript in Drupal 7
Clive

Deklarationsstil behoben
Eugene Fidelin

Welche Werte sollten aus diesem Skript 'Node-Form' ersetzt werden?
pal4life

Ich habe versucht, dies in Adminimal-Theme zum Laufen zu bringen, aber kein Glück. Benennen Sie den Namen mit adminimal um und kopieren Sie den vollständigen Code in sitename.js. Trotzdem bekomme ich leicht mehr Einsendungen der gleichen Form.
Justme
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.