BreezingFoms / FacileForms

Problematik / Zielstellung

Es gibt nach wie vor Internetnutzer, die Formulare mit einem Doppelklick abschicken oder beim Versenden mehrfach auf den Absendebutton klicken, wenn nicht sofort ein Feedback vom Server kommt. Üblicherweise wird dann das Formular doppelt abgesendet und schlagen beim Administrator in ungewollten Mengen auf. Einige Browser sind mittlerweile mit einer Funktion ausgestattet, die die Submit-Button automatisch deaktivieren, sobald der Nutzer das erste mal geklickt hat. Leider nicht alle, weshalb eine programmierte Lösung her muss.

Prinzipeller Ansatz der Lösung

Immer mal wird darüber diskutiert wo man die Mehrfachversendung unterbinden sollte. Dies innerhalb der Server-Scripte vorzunehmen ist denkbar ungünstig und erheblich aufwändiger. Sinnvoll ist hier nur clientseitig im Brower per JavaScript ein mehrfaches Absenden zu unterbinden. Das geschieht am besten, indem der Button nach dem ersten klick und nach dem Validieren der Formulardaten sofort auf disabled gesetzt wird.

BreezingForms verwendet bereits diverse JavaScript-Funktionen z.B. für die Formular-Validierung oder das Prüfen der Captcha-Code-Eingaben. Verantwortlich sind hier die JS-Funktionen ff_submitForm() und ff_submitForm2(). Erstere bindet die Captcha-Prüfung ein und bei Erfolg wird dann das Formular per ff_submitForm2() schließlich versendet.

Das Abschalten des Submit-Buttons darf erst erfolgen, nachdem die Captcha-Eingabe erfolgreich bestätigt wurde, aber vor dem Absenden.

Umsetzung im Detail

Oben genannte JS-Funktion ff_submitForm2() wollen wir zu diesem Zweck erweitern. Dieses Script wird in die Seite eingebunden bei der Ausführung des BreezingForms-Hauptscriptes facileforms.process.php im Verzeichnis components/com_breezingforms/. Ca. Zeile 1326ff wird der String $code zusammengebaut und als $library[] - Array zur Ausgabe zusammengefügt. Wir fügen hier JavaScript-Zeilen ein, die das Formular nach dem Submit-Button durchsuchen, den Button dann deaktivieren und evtl. zusätzlich mit einer Sanduhrgrafik als Background versehen. So sehen die Änderungen dann konket aus:

1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340

$code.= "function ff_submitForm2()".nl().
 "{".nl();
$code .= "
 var form = document.".$this->form_id."; 
 var num = form.elements.length;
 for (var i=0; i < num; i++) { if ( form.elements[i].type == 'submit' ){ 
 form.elements[i].disabled = true; 
 form.elements[i].value= 'Bitte warten';
 form.elements[i].style.backgroundColor = '#FFFFFF';
 form.elements[i].style.backgroundImage = 'url(/images/loadingcircle.gif)';
 form.elements[i].style.backgroundPosition = 'center';
 form.elements[i].style.backgroundRepeat = 'no-repeat'; 
 } }";
if ($this->inline)
 $code .= " submitform('submit');".nl();
else
 $code .= " document.".$this->form_id.".submit();".nl();
$code .= "} // ff_submitForm";
$library[] = array('ff_submitForm', $code);

Hinzugefügt wurden die Zeilen 1324 bis 1334 im Codebeispiel.

Bitte beachten, dass dies Eingriffe in die CORE-Scripte von BreezingForms sind. Bei zukünfigen Updates muss das berücksichtigt werden!