Gunnar Bittersmann: Werte von Click Botton speichen

Beitrag lesen

@@Tim

mit bottons

Du willst uns ein O für ein U vormachen?

Button, wie butt.

In dem botton steht dann der entsprechende text. beim klick des bottons verändert sich der text

In dem Zusammenhang ist der Artikel Toggle Buttons auf Inclusive Components unbedingt lesenswert.

Diese Anwendung ist nicht nur für dich, sondern soll von mehreren Personen genutzt werden, nehme ich an?

Dann ist es wohl am einfachsten, alle Statūs zentral zu verwalten. (Ginge sicher auch dezentral, aber lassen wir das mal.) Statusänderungen sollten also zum Server geschickt werden. Dafür musst du den type deiner Buttons (die bei dir input-Elemente sind; kann man machen, muss man aber nicht – es gibt den Elementtypen button) auf submit ändern und ihm einen namen geben:

<form>
	<p><label>Andreas <input type="submit" name="Andreas" value="Nicht da"></p>
	<p><label>Birgit <input type="submit" name="Birgit" value="Nicht da"></p>
</form>

Clickst du bei Birgit auf „Nicht da“, wird Birgit=Nicht+da per GET zum Server geschickt. Da sollte nun ein Script (PHP o.a.) hinterstecken, das die Eingabe entgegennimmt, den Status abspeichert (Datenbank) und die Seite mit dem geänderten Wert „Bin da“ erneut rausschickt.

Wenn dieselbe Seite erneut aufgerufen wird, lässt du das action-Attribut beim form-Element einfach weg; action="" ist falsch.

Ich hab auch gleich mal den Eingabeelementen eine (für alle Nutzer zugängliche!) Beschriftung label verpasst.

Ein Dilemma ist hier deutlich zu sehen: Die Buttonbeschriftung zeigt den geggenwärtigen Status an. Das ist das Entgegengesetze von den, was der Button bewirkt – man muss auf „Nicht da“ clicken, um sich anzumelden und auf „Bin da“ um sich abzumelden‽ Darüber solltest du dir nochmal Gedanken machen. Der eingangs verlinkte Artikel erwähnt ja bspw. auch Schiebeschalter als Eingabeelemente.

Als progressive enhancement könnte man hier mit JavaScript noch ein optimistisches UI bauen und die Statusänderung sofort sichtbar machen, während die Übertragung zum Server noch im Hintergrund läuft. (Wenn da was schieflaufen sollte, muss man das natürlich dann dem Nutzer melden.)

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory