CSS, HTML und Javascript mit {stil}

onsubmit / onreset • Formular Absenden / Zurücksetzen

onsubmit – beim Absenden eines Formulars / onreset Zurücksetzen eines Formulars

Wenn der Benutzer ein Formular absendet, feuert der Browser ein submit-Event. Javascript kann das Event abfangen und verhindern, dass die Daten an den Server übermittelt werden.
Dann kann das Script die Formulareingaben prüfen, bevor die Eingaben an eine Anwendung auf dem Server übertragen werden – z.B. ob alle erforderlichen Felder ausgefüllt wurden.

Auch wenn die HTML5-input-types mit Attributen wie required und Pseudoklassen wie valid / invalid viele Aufgaben übernehmen: Das clientseitige Prüfen vor dem Absenden von Benutzereingaben trägt zu einem barrierefreien Ausfüllen von Formularen mit weniger Abbrüchen bei.

onsubmit – beim Absenden

onsubmit ist ausschließlich für das form-Element gedacht und in erster Linie bei der Validierung von Formularen eingesetzt. onsubmit feuert in dem Augenblick, in dem der Benutzer das Formular zur Bearbeitung abschickt.

Wenn Javascript nicht aktiviert ist, wird die vorgegebene Aktion des Formulars – die Übertragung der Daten an die Anwendung – ohne Prüfung ausgeführt. Beim Aufruf des Scripts muss das Absenden explizit verhindert werden. Der klassische Mechanismus war return false, heute verhindert event.preventDefault() das Absenden des Formulars, wenn Eingaben nicht akzeptiert werden.

<form action="myForm.php" method="post" id="myForm">
   <input type="text" size="20" required />
   <input type="submit" value="Absenden" />
</form>
…
document.getElementById('myForm').onsubmit = function (evt) { 	
   var input = document.getElementById('name').value;
   if (input.length < 3) {
      msg.innerHTML = '»Name« bitte ausfüllen'
      evt.preventDefault();
   } 
}
 oder 

document.getElementById('myForm').addEventListener (
    "submit", 
    function (evt) {
    	// Eingaben nicht korrekt
    	evt.preventDefault();
    	//
});

Das Script prüft, ob eine Mindestzahl von Zeichen eingegeben wurden. Falls nicht, ruft das Script event.preventDefault auf, damit das Formular die Daten nicht an die Anwendung überträgt.

Ablauf beim Senden eines Formulars und Prüfen mit Javascript

onsubmit und return false

return false stammt aus der Frühzeit von Javascript, funktioniert aber noch in allen Browsern. Alternativ kann die neuere Funktion event.preventDefault benutzt werden (nicht IE8 und älter). Dafür muss das Event als Parameter übergeben werden.

window.addEventListener ('submit', function (evt) {
   …
   evt.preventDefault);
   …
})

Falls ältere Browser noch unterstützt werden sollen, ist event.returnValue = false dem evt.preventDefault am nächsten.

(evt.preventDefault) ? eve.preventDefault() : eve.returnValue = false;

onreset

Der Browser feuert ein reset-Event, wenn der Benutzer das HTML-Formular durch den Reset-Button zurücksetzt oder durch den Aufruf von form.reset().

onreset feuert also nicht nur, wenn der Benutzer den Reset-Button drückt, sondern auch durch den Aufruf von form.reset();

Javascript onreset ist ebenfalls ausschließlich dem HTML form-Element vorbehalten, aber einen Reset-Button sehen wir heute nur noch selten in Formularen – zu schnell drückt ein Benutzer den Button aus Versehen und löscht damit alle Felder des Formulars. Aber durch das Abfangen des onreset-Events kann ein Script die Felder auswählen, die tatsächlich gelöscht werden.

…
}
<input type="reset" value="Alles löschen / Reset" />
<input type="submit" value="Absenden" name="Absenden" />
…
<script type="text/javascript">
var form = document.getElementById('form');
form.onreset = function() {
   if (!window.confirm('Wollen Sie wirklich alle Eingaben löschen?')) 
   return false;
</script>

onreset wird für das form-Element gemeldet – nicht für den Reset-Button. Hier bekommt der Benutzer noch die Chance, das Reset und damit das Löschen aller Eingaben zu canceln.

var passwd = document.getElementById('passwd');
passwd.onchange = function() {
	if (passwd != thePasswd)
	form.reset();
}

onreset Attribute

target
Objekt zu dem das Ereignis ursprünglich gesendet wurde
eventPhase
Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
bubbles
true, wenn das Ereignis nach oben steigen kann
cancelable
true, wenn die Aktion des Ereignis verhindert werden kann
timeStamp
Zeit in Millisekunden, zu der das Ereignis eingetreten ist
FORMULAR onsubmit Name Ort Email submit alles richtig Fehler preventDefault return