onchange nicht bei leer ausführen
bearbeitet von Gunnar Bittersmann@@Sophie
> ~~~html
> <form action="" method="POST">
> <label for="status">Status</label>
> <select name="status" id="status" onchange="this.form.submit()">
> <option value="">-- Bitte wählen --</option>
> <option value="1">Online</option>
> <option value="2">Offline</option>
> <option value="3">Gelöscht</option>
> <option value="4">Rückfrage</option>
> </select>
> </form>
> ~~~
Ich halte `select` für keine gute Idee.
1. Nutzer sieht nicht gleich alle Optionen.
2. Nutzer muss 2 Interaktionen ausführen: erst öffnen des Menüs, dann Auswahl
3. es ist eine Option vorausgewählt, die dar keine Option ist
Besser sind in den allermeisten Fällen Radio-Buttons:
~~~HTML
<form action="" method="POST" onchange="this.submit()">
<fieldset>
<legend>Status</legend>
<label><input type="radio" name="status" value="1" required> Online</label>
<label><input type="radio" name="status" value="2" required> Offline</label>
<label><input type="radio" name="status" value="3" required> Gelöscht</label>
<label><input type="radio" name="status" value="4" required> Rückfrage</label>
</fieldset>
<button>Status ändern</button>
</form>
~~~
(`required` bei jedem der Radio-Buttons ist empfohlene Praxis, siehe [Beispiel 23](http://w3c.github.io/html/sec-forms.html#the-required-attribute))
Du lauschst jetzt aufs `change`-Event des `form`-Elements.
Wie bereits gesagt, sollte das nicht im HTML-Code stehen. Stattdessen gibts du dem Formular einen Namen:
~~~HTML
<form action="" method="POST" name="status-form">
~~~
und registrierst den Eventhandler:
~~~JavaScript
var statusFormElement = document.forms['status-form'];
statusFormElement.addEventListener('change', function () { this.submit(); });
~~~
Näheres dazu bei molily: [Fortgeschrittene Ereignisverarbeitung.](https://molily.de/js/event-handling-fortgeschritten.html) (Den Teil ab „Event-Handling gemäß Microsoft für ältere Internet Explorer“ kannst du wohl ignorieren; IE 8 und älter dürfte nicht mehr relevant sein.)
Den Submit-Button hab ich eingefügt, damit das Formular auch ohne JavaScript bedienbar ist. Wenn JavaScript ausgeführt wird, dann kann der mit JavaScript(!) ausgeblendet werden:
~~~JavaScript
statusFormElement.querySelector('button').setAttribute('hidden', '');
~~~
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
onchange nicht bei leer ausführen
bearbeitet von Gunnar Bittersmann@@Sophie
> ~~~html
> <form action="" method="POST">
> <label for="status">Status</label>
> <select name="status" id="status" onchange="this.form.submit()">
> <option value="">-- Bitte wählen --</option>
> <option value="1">Online</option>
> <option value="2">Offline</option>
> <option value="3">Gelöscht</option>
> <option value="4">Rückfrage</option>
> </select>
> </form>
> ~~~
Ich halte `select` für keine gute Idee.
1. Nutzer sieht nicht gleich alle Optionen.
2. Nutzer muss 2 Interaktionen ausführen: erst öffnen des Menüs, dann Auswahl
3. es ist eine Option vorausgewählt, die dar keine Option ist
Besser sind in den allermeisten Fällen Radio-Buttons:
~~~HTML
<form action="" method="POST" onchange="this.submit()">
<fieldset>
<legend>Status</legend>
<label><input type="radio" name="status" value="1" required>Online</label>
<label><input type="radio" name="status" value="2" required>Offline</label>
<label><input type="radio" name="status" value="3" required>Gelöscht</label>
<label><input type="radio" name="status" value="4" required>Rückfrage</label>
</fieldset>
<button>Status ändern</button>
</form>
~~~
Du lauschst jetzt aufs `change`-Event des `form`-Elements.
Wie bereits gesagt, sollte das nicht im HTML-Code stehen. Stattdessen gibts du dem Formular einen Namen:
~~~HTML
<form action="" method="POST" name="status-form">
~~~
und registrierst den Eventhandler:
~~~JavaScript
var statusFormElement = document.forms['status-form'];
statusFormElement.addEventListener('change', function () { this.submit(); });
~~~
Näheres dazu bei molily: [Fortgeschrittene Ereignisverarbeitung.](https://molily.de/js/event-handling-fortgeschritten.html) (Den Teil ab „Event-Handling gemäß Microsoft für ältere Internet Explorer“ kannst du wohl ignorieren; IE 8 und älter dürfte nicht mehr relevant sein.)
Den Submit-Button hab ich eingefügt, damit das Formular auch ohne JavaScript bedienbar ist. Wenn JavaScript ausgeführt wird, dann kann der mit JavaScript(!) ausgeblendet werden:
~~~JavaScript
statusFormElement.querySelector('button').setAttribute('hidden', '');
~~~
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)