Manchmal verklickt man sich, oder man überliest in Eile einen Hinweis. Da kann es schon mal passieren, das man ausversehen auf die Zurücksetzen-Schaltfläche anstatt auf die direkt daneben liegende Absenden-Schaltfläche klickt. Oder man schließt versehentlich das falsche Fenster, und alle im Formular eingegebenen Daten müssen noch einmal eingegeben werden. Gerade bei längeren Forenbeiträgen, oder Blog-Artikeln ist das sehr ärgerlich.

Ein paar einfache Java Script-Funktionen schaffen da Abhilfe. Vor dem Absenden oder Zurücksetzen eines Formulars kann der Benutzer noch einmal gefragt werden ob er das wirklich tun will. Auch vor dem Verlassen/Schließen der Seite lässt sich eine solche Abfrage erstellen. Außerdem erkläre ich, wie man eine Schaltfläche erst nach einer bestimmten Zeit aktivieren kann.

Zurücksetzen der Formularfelder

Um dem Benutzer die Möglichkeit zu geben, die Formularfelder wieder auf den Anfangswert zurückzusetzen bzw. sie wieder zu leeren genügt ein input-Element vom Typ reset.

<input type="reset" value="Zur&uuml;cksetzen" />

Mit Java Script ist es allerdings auch möglich, beim Zurücksetzen des Formulars noch weitere Aktionen auszuführen oder das Zurücksetzen besser zu steuern. So ist es beispielsweise möglich nur bestimmte Felder zurückzusetzen oder den Benutzer zu fragen ob er die Daten wirklich zurücksetzen möchte. Dazu trägt man im onreset-Ereignis des form-Elementes die Funktion ein, die beim Zurücksetzen des Formulars ausgeführt werden soll.

<form action="..." onreset="return wirklichZuruecksetzen();">

Es ist auch möglich die Funktion einen Wert zurückgeben zu lassen, mit dem man steuern kann ob das Formular auch wirklich zurückgesetzt wird. Gibt die aufgerufene Funktion false zurück wird das Formular nicht zurückgesetzt, bei true wird es zurückgesetzt.

function wirklichZuruecksetzen() {
	return confirm('Alle Eingaben loeschen?');
	// Anstatt dessen koennte man hier auch nur bestimmte Felder zuruecksetzen und
	// false zurueckgeben.
}

Abfrage vor dem Absenden

Um eine Abfrage vor dem Absenden zu erstellen, trägt man einfach eine Funktion beim onsubmit-Ereignis des form-Elements ein, auch hier entscheidet wieder der Rückgabewert darüber ob das Formular abgesendet wird.

<form action="..." onsubmit="return confirm('Daten abschicken?');">

Der Vorteil dieser Methode ist, das sie schnell und einfach programmiert ist, der Nachteil das sie nur funktioniert, wenn der Benutzer Java Script aktiviert hat bzw. sein Browser Java Script unterstützt. Bei wichtigen Formularen (beispielsweise einer Bestellung) ist es empfehlenswert, die Daten erst an eine Zwischenseite zu senden, welche noch einmal alle Eingaben auflistet und auf der noch einmal das Absenden bestätigt werden muss.

Im onsubmit-Ereignis lässt sich übrigens nicht nur eine Abfrage einbauen. Man könnte beispielsweise auch überprüfen ob alle Felder (richtig) ausgefüllt sind, und den Benutzer auf eventuelle Fehler hinweisen/auffordern diese zu korrigieren.

Verlassen/Schließen des Formulars: Abfrage bzw. Funktion ausführen

Man kann den Benutzer vor dem Verlassen der aktuellen Seite zu fragen ob er die Seite wirklich verlassen möchte. Dazu kann das onbeforeunload-Ereignis verwendet werden, welches heutzutage von den meisten Browsern unterstützt wird, obwohl es nicht zum Standard gehört.

/* Fragt den Benutzer, ob er die Seite wirklich verlassen moechte.
 */
window.onbeforeunload = function (e) {
	// Hier koennte man noch abfragen ob bereits Eingaben getaetigt wurden,
	// wenn nicht, braucht man in den meisten Faellen wohl auch keine Nachricht
	// anzeigen.
	var nachricht = 'Sie haben das Formular noch nicht abgesendet, möchten Sie das Fenster trotzdem schließen?';
 
	var e = e || window.event;
 
	if (e) {
		e.returnValue = nachricht;
	}
 
	return nachricht;
};
 
window.onload = function() {
	// Keine Meldung ausgeben, wenn der Benutzer die Seite ueber die
	// Absenden-Schaltflaeche verlaesst.
	for (var i = 0; i < document.forms.length; i++)
		document.forms[i].onsubmit = function () { window.onbeforeunload = ''; };
};

Die dem onbeforeunload-Ereignis zugewiesene Funktion sorgt dafür das der Benutzer beim Schließen des Fensters bzw. beim Verlassen der Seite gefragt wird ob er die Seite wirklich schließen möchte. Damit das geschieht, muss die Nachricht, die angezeigt werden soll in das returnValue-Element von dem Ereignis geschrieben, und als Rückgabewert zurückgegeben werden. Bleibt returnValue leer bzw. wird nichts zurückgegeben, erscheint auch keine Nachricht.

Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit freigeben

Es ist möglich die Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit zu aktivieren, so dass der Benutzer sie vorher nicht anklicken kann. Das ist beispielsweise in einem Forum sinnvoll, wo der Benutzer nur alle 60 Sekunden einen Beitrag schreiben kann. Der Browser des Benutzers stellt die Schaltfläche ausgegraut da, und zeigt auf der Schaltfläche an wie lange es noch dauert bis das Formular abgesendet werden kann. Die Zeit muss selbstverständlich auch serverseitig überprüft werden, diese Funktion ist nur dazu gedacht, es dem Benutzer einfacher zu machen, zu erkennen wann er auf die Absenden-Schaltfläche klicken kann. Durch das Deaktivieren von Java Script kann die Funktion “umgangen” werden, sie stellt also keinen Sicherheitsmechanismus dar!

/* Sorgt dafuer, das eine Schaltflaeche erst nach Ablauf einer bestimmten Zeit
 * klickbar wird, kann aber leicht "umgangen" werden.
 */
function AbsendenENA(sf, zeit) {
	var self = this;
	var intervall = window.setInterval(function() { self.aktualisieren() }, 1000);
	sf.disabled = true;
	var sftext = sf.value;
 
	this.aktualisieren = function() {
		if (zeit > 0) {
			sf.value = sftext + '(' + zeit + ')';
		}
		else {
			sf.value = sftext;
			sf.disabled = false;
			window.clearInterval(intervall);
		}
		zeit--;
	};
 
	this.aktualisieren();
}
 
window.onload = function() {
	// Absenden-Schaltflaeche erst nach einer bestimmten Zeit benutzbar machen
	new AbsendenENA(document.getElementById('abschicken'), 20);
};

Im Beispiel wird eine neue Instanz des AbsendenENA-Objekts erstellt, der erste Parameter ist das Schaltflächen-Objekt (mit der ID abschicken), der zweite die Zeit bis zum Aktivieren, in Sekunden. Die Klasse kann theoretisch an jeder Stelle benutzt werden, im Beispiel wird sie beim onload-Ereignis aufgerufen.

Ich rate dazu, die Funktion nur an Stellen zu verwenden, an denen es dem Benutzer aus technischen (oder auch anderen) Gründen eh nicht möglich wäre das Formular vor Ablauf der Zeit abzuschicken, beispielsweise weil ein Spamschutz das Abschicken serverseitig eh nur alle X Sekunden zulässt. Man kann den Benutzer mit einer solchen Funktion nicht dazu zwingen sich irgendwelche Forenregeln, AGBs, oder sonstwas durchzulesen.

• Formulare: Datei-Element umgestalten
• Geteilte Eingabe
• Dateien hochladen in PHP
• Elemente ein- und ausblenden
• CSS: DIV-Element mit 100% Höhe