onchange nicht bei leer ausführen

[Gunnar Bittersmann]

@@Sophie

<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:

<form 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>

(Die HTML-Spec sagt: action="" ist nicht erlaubt, einfach weglassen. required bei jedem der Radio-Buttons ist empfohlene Praxis, siehe Beispiel 23)

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:

<form method="POST" name="status-form">

und registrierst den Eventhandler:

var statusFormElement = document.forms['status-form'];

statusFormElement.addEventListener('change', function () { this.submit(); });

Näheres dazu bei molily: Fortgeschrittene Ereignisverarbeitung. (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:

statusFormElement.querySelector('button').setAttribute('hidden', '');

LLAP 🖖