reset • Alle Formulareingaben zurücksetzen

reset

Auch ohne den Einsatz von Javascript setzt ein <button type="reset" …> oder <input type="reset" …> automatisch alle Felder auf ihre ursprünglichen Werte zurück. 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().

<input type="reset" value="Zurücksetzen">
	// oder
<button type="reset">Reset</button>

Javascript reset() ist – wie auch das submit-Event – ausschließlich dem HTML form-Element vorbehalten. Einen Reset-Button sehen wir heute nur selten in Formularen – zu schnell drückt ein Benutzer den Button aus Versehen und löscht damit alle Felder des Formulars. Eher erwarten Benutzer Funktionen wie Abbrechen oder Zurück anstelle eines vollständigen Zurücksetzen. Benutzer wollen lieber Eingaben korrigieren als sie komplett löschen. Durch das Abfangen des reset-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>
let form = document.getElementById('form');
form.onreset = function() {
   if (!window.confirm('Wollen Sie wirklich alle Eingaben löschen?')) 
   return false;
</script>

reset 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.

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

reset 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