Formulare deaktivieren

Was man öfters bei grossen Seiten wie PayPal o.ä. sieht, ist das deaktivieren von Formularen nach dem Versand. Das ganze wird mit JavaScript realisiert und dient dazu dem herkömmlichen Benutzer Doppelpostings zu verbieten. Ein wirklicher Schutz ist das natürlich nicht denn JavaScript ist deaktivierbar. Es hat aber dennoch seine Existenzberechtigung:

function troughForms(sent)
{
	var len = document.forms.length;
	for (var i = 0; i < len; i++) {
		var elem = document.forms[i];
		if (sent) { disableForm(elem) } else { appendEvent(elem) }
	}
}
function disableForm(form)
{
	var len = form.elements.length;
	for (var i = 0; i < len; i++) {
		var element = form.elements[i];
		element.disabled = true;
		element.blur();
	}
}
function appendEvent(form)
{
	form.onsubmit = function ()
	{
		this.submit();
		troughForms(true);
		return false;
	}
}
window.onload = function () { troughForms(false) }

Erstmal tief Luft holen. Das sieht kompliziert aus – ist es aber nicht. Dreh- und Angelpunkt des ganzen ist troughForms(). Diese Funktion geht das gesamte Dokument durch und entscheidet anhand des Parameters ob er ein onsubmit-Event an das Formular anhängt oder es komplett deaktiviert. Beim ersten mal wird es natürlich dazu benutzt allen Formularen auf der Seite ein Event zu verpassen. Beim Versand passiert dann genau das Gegenteil. Die gleiche Funktion ist also für das Setup und den Gebrauch zuständig.

Die Vorteile an diesem Beispiel sind:
- nichts muss am Markup geändert werden.
- nicht nur der “Senden”-Knopf wird deaktiviert sondern das gesamte Formular.
- nicht nur das versandte sondern jedes Formular auf der Seite wird deaktiviert.

Um das ganze zu verwenden, müssen wir den JavaScript-Code (oben) in eine Datei speichern. In unserem Fall wählen wir deactivate.js, die wir dann im HTML-Dokument folgendermassen einbinden:

<script type="text/javascript" src="./deactivate.js"></script>

Geschafft. Übrigens wäre das ganze mit addEventListener('submit', ...) sicher moderner gewesen aber nicht jeder Browser unterstützt es. Und bei eingefügter Browserkompatibilität wäre der Code dann mindestens gleich gross aber nicht gleich schön.