Submit-Button nach Abschicken deaktivieren

[dette]

Hallo Forum,

seit kurzem fällt mir eine Häufung von doppelt abgeschickten Formularen auf unserer Website auf. Da wir an die Verarbeitung der Formulare noch einen xmlrpc-request an einen anderen Server gebunden haben, dauert es etwas, bis die Weiterleitungsseite sichtbar wird, und das scheint viele Anwender dazu zu verleiten, nochmal zu klicken. Der Zeitpunkt seit dem dieses Phänomen auftritt, fällt ungefähr mit dem Upgrade von contao 3.4 auf 3.5 zusammen; das kann natürlich auch Zufall sein. Bei näherem Nachsehen ist mir jedenfalls aufgefallen, daß die Submit-Buttons unserer Formulare nicht mehr beim Absenden deaktiviert werden. Ich meine aber, daß das früher der Fall war.

Weiß jemand

1. ob das stimmt (früher der submit-Button deaktiviert wurde bzw. noch wird)?
2. wenn ja, wo ich nachsehen kann, warum es nicht mehr klappt? (wie das Deaktivieren umgesetzt ist, welches js oder css dafür nötig ist oder sowas)
3. Wenn nicht, wie ich das am ehesten Contao-konform umsetzen kann?

Danke im Voraus,
Dette

[Thoni]

Hallo,

man kann es mit JavaScript lösen.

Beim Klick-Event fügst du dem Button eine Klasse hinzu.
Existiert die Klasse, wurde der Button schon geklickt und dann wird false zurückgegeben.

Eventuell das ganze mit dem Form (-submit) machen.

Ungetestet!

[dette]

Hallo Thoni,

danke für Deinen Vorschlag. JS hat mir auch schon vorgeschwebt, aber ich wollte halt keine eigene Lösung reinfrickeln, wenn es das schon in Contao gibt und ich es bloß kaputtgemacht hab.

Ich habs jetzt mit JS gelöst, siehe unten.

Wahrscheinlich gehts auch eleganter, schließlich stehen mootools und queryjs zur Verfügung, aber ich fands halt so einfacher und schneller zu lösen.
Vielleicht findet eine gute Lösung auch den Weg in die Core-Module oder in efg bzw. deren Nachfolger; ich denke, ich bin nicht der Einzige, der mit doppelt abgeschickten Formularen zu kämpfen hat.


Für alle, die mal vor demselben Problem stehen, hier ein paar Details:

Template form_submit.[html5|xhtml] angepaßt: (dies ist nicht unbedingt nötig, dient nur der Bequemlichkeit, das Submitfeld per Name ansprechen zu können)

...
<input type="submit" name="SubmitButton" id="ctrl_<?= $this->id ?>" ...>....
...

Achtung: durch diverse if->then->else Schleifen kommt diese Zeile öfter vor und sollte überall, wo sie anwendung findet, auch ergänzt werden!

Dann das Template form.[html5|xhtml] angepaßt:

1. oben einfügen:
   
   

   ...
   <!-- indexer::stop -->
   
   <script type="text/javascript">
   
     function deactivateSubmit(form) // Submit button clicked
     {
       //
       // check form input values
       //
       form.SubmitButton.disabled = true;
       form.SubmitButton.value = "Submitting, please wait...";
       return true;
     }
   
     function activateSubmit() // Reset button clicked
     {
       form.SubmitButton.disabled = false;
       form.SubmitButton.value = "Submit";
     }
   
   </script>
   ... 

   Die "activateSubmit()"-Methode ist eigentlich nur zur Sicherheit gedacht, und könnte an einen Reset-Button oder ans document-load-Event gebunden werden, falls es Probleme gibt.
   
2. dann noch die 'form'-Zeile weiter unten ergänzt:
   

     <form action="<?= $this->action ?>" id=....    onsubmit="deactivateSubmit(this);">

Möge dies dem einen oder anderen noch nützlich sein.

Allen anderen noch eine schöne Woche!

[bajdin]

Hallo an alle,

ich weiß der Beitrag ist schon paar Tage alt aber lässt sich das ganze auch irgendwie per jQuery umsetzen? Würde mich über Anregungen freuen!

[Andreas]

Für FORM id="f5"

$('#f5').submit(function(event) {
  $('#f5 .submit').prop('disabled', true);
}); 

Komplettes Script zusätzlich mit nem Overlay

<script>
  (function($) {
    $(document).ready(function() {

      // form ID is 5
      $('#f5').submit(function(event) {
        // disable submit button
        $('#f5 .submit').prop('disabled', true);

        // additional overlay
        $('body').append('<div class="wait"></div>');
        $('.wait').css({
          position: 'fixed',
          width: '100vw',
          height: '100vh',
          left: 0,
          top: 0,
          backgroundColor: 'rgba(0, 0, 0, .75)',
          cursor: 'progress',
          zIndex: 1 // or higher
        });

        // event.preventDefault(); // for debugging

      });

    });
  })(jQuery);
</script>