Werte von Click Botton speichen

[Tim]

Hallo, leider bin ich noch blutiger anfänger und habe folgendes problem. Ich habe einen html code mit bottons erstellst in denen angezeigt werden soll ob personen da sind oder nicht. In dem botton steht dann der entsprechende text. beim klick des bottons verändert sich der text und soll dann irgendwie gespeichert werden so das wenn mann den browser neu startet und die site offnet die bottons noch den wert haben der vorher eingestellt wurde. Den bisherigen code kann ich auch schon einmal vorzeigen

<form  action="" name="test">
  Andreas<input type="button" value="Nicht da" name="b1" onclick="changevalue()" ><br>
</form>

dazu gehört forgende function:

function changevalue()
{
  if (document.test.b1.value=="Bin da")
  {
    document.test.b1.value="Nicht da";
  }
  else
  {
    document.test.b1.value="Bin da";
  }
}

wäre echt toll wenn mir hier jemand weiter helfen kann. Wie der wert gespeichert wird ist egal. Kann auch in einer zusatzlichen datei sein -keine ahnung-

[Gunnar Bittersmann]

@@Tim

Den bisherigen code kann ich auch schon einmal vorzeigen

Bitte das nächste Mal auch als Code kennzeichnen, am einfachsten mit dem </>-Button über dem Eingabefeld: Code markieren, Button drücken, Sprache auswählen – fertig.

Ich hab das mal für dich nachgeholt.

LLAP 🖖

[Tim]

@Gunnar Bittersmann

Vielen dank und sorry. Kenne mich hier noch nicht so gut aus, habe mich gerade erst registriert. Perfect wäre noch ne idee zur lösung

[Sophie]

Hallo,

schau dir dazu mal die Funktion localStorage & localStorage bei w3 Schools an. Damit kannst du dein Vorhaben umsetzten. Alternativ wenn du eine Datenbank zur Verfügung hast kannst du die Werte auch in einer Datenbank schreiben.

[Tabellenkalk]

Hallo,

[localStorage]

auch hier im Wiki: localStorage

Gruß
Kalk

[Gunnar Bittersmann]

@@Sophie

schau dir dazu mal die Funktion localStorage & localStorage bei w3 Schools an. Damit kannst du dein Vorhaben umsetzten.

Ich bin vom Gegenteil ausgegangen. Aber die Frage „Diese Anwendung ist nicht nur für dich, sondern soll von mehreren Personen genutzt werden, nehme ich an?“ steht ja noch im Raum.

Ist w3schools inzwischen wenigstens so brauchbar geworden, dass man darauf verweisen kann?

LLAP 🖖

[Sophie]

Hallo,

Ist w3schools inzwischen wenigstens so brauchbar geworden, dass man darauf verweisen kann?

Gegenfrage, war w3schools jemals so unbrauchbar dass man nicht drauf verweisen konnte? Ich lese dort gerne. Und auch in einigen Videos von Linkedin wird darauf verwiesen.

[1unitedpower]

Ist w3schools inzwischen wenigstens so brauchbar geworden, dass man darauf verweisen kann?

Laut Paul Irish, dem Initiator von w3fools, schon.

[Gunnar Bittersmann]

@@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 🖖

[Sophie]

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

Müsste es nicht so

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

oder so

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

heißen?

[Tim]

Ich danke euch schon einmal für die vielen kreativen ideen. Werde es jetzt mal versuchen umzusetzen. @Gunnar Bittersmann zu deiner frage wegen der nutzung liegst du mit deiner vermutung richtig. Ich habe eine kleine firma und das ziel soll es sein das jeder mitarbeiter einmal auf die seite gehen kann (soll im intranet laufen) und anklicken kann ob er da ist oder nicht, so das ich nicht immer durch das ganze gebäude rennen muss wenn ich ein aliegen mit einem mitarbeiter klären möchte und dann am ende festzustellen das er gar nicht da ist. So habe ich dann eine kleine übersicht ob sie im hause sind oder gerade auf aussenterminen sind.

[dedlfix]

Tach!

Ich habe eine kleine firma und das ziel soll es sein das jeder mitarbeiter einmal auf die seite gehen kann (soll im intranet laufen) und anklicken kann ob er da ist oder nicht, so das ich nicht immer durch das ganze gebäude rennen muss wenn ich ein aliegen mit einem mitarbeiter klären möchte und dann am ende festzustellen das er gar nicht da ist. So habe ich dann eine kleine übersicht ob sie im hause sind oder gerade auf aussenterminen sind.

Da muss man als Mitarbeiter aber immer daran denken, auf die Seite zu gehen, wenn man kommt, und auch wenn man wieder geht. Startet man seinen Rechner nochmal, wenn man das vergessen hat?

Wäre es nicht besser, wenn sich der Zustand von selbst auf verfügbar schaltet, wenn der Rechner angeschaltet wird, und so weiter? Wie wäre es mit eingebauter Chat-Funktion, um sich Texte senden zu können? Lohnt sich denn der Selbstbau, wenn Programme wie beispielsweise Skype das bereits mitbringen, und noch dazu anwenderfreundlicher als der eigene Entwurf?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Da muss man als Mitarbeiter aber immer daran denken, auf die Seite zu gehen, wenn man kommt, und auch wenn man wieder geht. Startet man seinen Rechner nochmal, wenn man das vergessen hat?

Wäre es nicht besser, wenn sich der Zustand von selbst auf verfügbar schaltet, wenn der Rechner angeschaltet wird, und so weiter?

„Rechner starten“, „Rechner anschalten“ … Was ist das?

Sowas ähnliches wie „Bildschirm entsperren“, nur mit viel viel längerer Wartezeit?

(Wenn man „Glück“ hat, den halben Vormittag, wenn Windows mal wieder ein Update fährt?)

Wie wäre es mit eingebauter Chat-Funktion, um sich Texte senden zu können? Lohnt sich denn der Selbstbau, wenn Programme wie beispielsweise Skype das bereits mitbringen, und noch dazu anwenderfreundlicher als der eigene Entwurf?

Da muss man aber auch daran denken, seinen Status zu ändern. Wer macht das bei Skype schon immer?

Und überhaupt: Will man Skype/Microsoft wirklich immer wissen lassen, wann man kommt und wann man geht?

LLAP 🖖

[dedlfix]

Tach!

„Rechner starten“, „Rechner anschalten“ … Was ist das?

Sowas ähnliches wie „Bildschirm entsperren“, nur mit viel viel längerer Wartezeit?

Der Zustand lässt sich auch an diese und andere Arten des Stand-By/An/Aus binden.

Wie wäre es mit eingebauter Chat-Funktion, um sich Texte senden zu können? Lohnt sich denn der Selbstbau, wenn Programme wie beispielsweise Skype das bereits mitbringen, und noch dazu anwenderfreundlicher als der eigene Entwurf?

Da muss man aber auch daran denken, seinen Status zu ändern. Wer macht das bei Skype schon immer?

Nicht für den generellen Status, wie On/Offline, Abwesend nach Zeit. Aber Status wie Beschäftigt/Nicht stören, geht nicht anders als mit Bedienerhandlung, wenn es nicht an abfragbare Zustände wie "telefoniert gerade" oder "Präsentation im Vollbildschirm gestartet" abzufragen geht. Da ist auch die selbst geschriebene Lösung nicht im Vorteil.

Und überhaupt: Will man Skype/Microsoft wirklich immer wissen lassen, wann man kommt und wann man geht?

Skype war nur ein Beispiel, das wohl jedem bekannt sein dürfte, weswegen ich es wählte. Es gibt solcher Art Programme auch mit selbst betriebenem Server oder auch in Verbindung mit Telefonanlagen.

Händisch den Status zu setzen ist jedenfalls fehleranfällig, besonders wenn man noch aktiv irgendwohin gehen muss. Lösungen mit Cloud (wie Skype) sind jedenfalls kein global gültiges Ausschlusskriterium. Ob "man" das will, ist jedenfalls nicht die Frage, die der OP beantworten muss.

dedlfix.

[Gunnar Bittersmann]

@@Sophie

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

Müsste es nicht so

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

oder so

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

heißen?

Weder noch. Im ersten Fall ist keine Zuordnung von label zum zugehörigen input erkennbar.

Im zweiten ist der gute Wille erkennbar, das reicht dem Browser (und assitiver Technik wie Screenreader) aber nicht. Das for-Attribut bezieht sich auf die ID des Eingabefeldes. Diese wären noch zu ergänzen:

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

So geht’s auch.

Es ist aber auch möglich, das Eingabefeld mit ins label-Element zu tun^[1], dann ist die Zuordnung implizit da – for und id braucht man dann nicht unbedingt.

LLAP 🖖

---

1. von den Bedenken mal abgesehen, dass input in label geschachtelt semantisch nicht stimmig ist (das Eingabefeld ist ja nicht Teil seiner Beschriftung) ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Da sollte nun ein Script (PHP o.a.) hinterstecken, das die Eingabe entgegennimmt, den Status abspeichert (Datenbank)

Wobei wir hier nicht unbedingt über ein Datenbankmanagementsystem (wie mySQL o.ä.) reden.

„Datenbank“ kann auch eine (Text-)Datei sein (JSON bietet sich an), z.B.

[
	{
		"name": "Andreas",
		"status": "nicht da"
	},
	{
		"name": "Birgit",
		"status": "da"
	},
	{
		"name": "Chris",
		"status": "da"
	}
]

(alle Personen stehen in der Datei, status wird jeweils geändert) oder auch

[ "Birgit", "Chris" ]

(wobei die Namen der Personen jeweils hinzugefügt bzw. entfernt werden)

LLAP 🖖

[Rolf B]

Hallo Tim,

prinzipiell ist das eine Lösung, die man bauen könnte, aber…

1. "Durch's Gebäude rennen" - hm - existiert ein Betriebsrat? Wenn ja: Das Tool ist mitbestimmungspflichtig (Es stellt eine Anwesenheitskontrolle dar)

2. Warum Räder neu erfinden, die schon da sind? Tools zur Anwesenheitsfeststellung / Zeiterfassung etc gibt's doch sicher wie Sand am Meer. Habt ihr eine elektronische Zeiterfassung? Hat die ein Webinterface?

Und wenn du es selbst baust: Eine Liste mit Namen und Checkboxen, in der jeder rumklicken kann, ist nicht geeignet. Selbst wenn jemand nur irrtümlich auf den falschen Namen klickt, ohne Schabernack treiben zu wollen, ist der Ärger vorprogrammiert. Du musst zumindest sicherstellen, dass jeder nur auf SEINEN Namen klicken kann. D.h. du brauchst eine Authentisierung der Nutzer.

Rolf