Status der Checkboxen speichern

Hallo!

Ich möchte (nur für den Eigengebrauch und nur lokal, also am eigenen Rechner) eine HTML-Seite mit mehreren Checkboxen erstellen. Ich möchte die Liste verwenden, um bestimmte, sich regelmäßig wiederholende Aufgaben zu verwalten, d.h. ich hake die erledigten Dinge ab.
Das ganze soll dann (nur lokal) gespeichert werden. Wenn ich aber so ein einfaches Formular habe und im Browser auf Seite speichern gehe, wird ja der Status der Checkboxen (aktiv/ inaktiv) nicht mitgespeichert.
Danke schon jetzt für eure Hilfe!

Grüße
Daniel

Hallo Daniel!

Das ganze soll dann (nur lokal) gespeichert werden. Wenn ich
aber so ein einfaches Formular habe und im Browser auf Seite
speichern gehe, wird ja der Status der Checkboxen (aktiv/
inaktiv) nicht mitgespeichert.

Das könnte aber ein Cookie übernehmen. Da würdest du diese Seite auch einfach nur erneut aufrufen und müsstest sie noch nicht einmal speichern. Beim Laden der Seite würde dann einfach der Status der jeweiligen Checkboxen so gesetzt, wie es das Cookie gespeichert hat und bei jeder Veränderung des Status der einzelnen Checkboxen würde auch das Cookie angepasst.

Gruß Gernot

Das könnte aber ein Cookie übernehmen. Da würdest du diese
Seite auch einfach nur erneut aufrufen und müsstest sie noch
nicht einmal speichern. Beim Laden der Seite würde dann
einfach der Status der jeweiligen Checkboxen so gesetzt, wie
es das Cookie gespeichert hat und bei jeder Veränderung des
Status der einzelnen Checkboxen würde auch das Cookie
angepasst.

Danke für die Antwort, das klingt ja schon sehr gut!
Hast du vielleicht auch noch ein kleines Beispiel, wie der Code dazu ungefähr aussehen sollte?

Grüße
Daniel

Hallo Daniel,

Danke für die Antwort, das klingt ja schon sehr gut!
Hast du vielleicht auch noch ein kleines Beispiel, wie der
Code dazu ungefähr aussehen sollte?

Ja auf einer meiner ersten Sprachlernpiel-Seiten, die ich schon vor Jahren programmiert habe, habe ich auch zum ersten Mal mit einem Cookie gearbeitet. Dort kann man sich aus allen unregelmäßigen Verben des Englischen über Checkboxen acht aussuchen. Nach Anklicken der achten wird ein Cookie geschrieben, welche man ausgewählt hat und man gelangt auf eine Folgeseite, bei der aus den acht Verben und ihren je drei Stanmformen ein Memory-Spiel generiert wird. Nachdem dieses gelöst ist (oder auch einfach, wenn du die Zurück-Funktion deines Browsers betätigst), gelangt man auf die Seite zum Auswählen der zu trainierenden Verben zurück. Dabei sind die, die man während des letzten Jahres (Verfallszeit des Cookies) bereits einmal trainiert hatte in grauer und die noch nicht geübten in roter Schrift geschrieben.

http://www.sprachlernspiele.de/match/irrverbchoice.html

So ganz hatte ich damals das Konzept von Cookies noch nicht verstanden und alles könnte mit besseren Algorithmen viel performanter laufen.

Ich speichere den Status der Texte neben den Checkboxen ja auf der Beispielseite u.U. x-fach und widersprüchlich in einem String.

Bestimmt ist es besser, für jede Checkbox ein eigenes boolesches Wertepaar anzulegen (aber mein Erstlingswerk verändere ich nach so vielen Jahren nun auch nicht mehr). Schau dir daher auch noch einmal selbst die Beschreibung zu Cookies auf SELFHTML an:

http://de.selfhtml.org/javascript/objekte/document.h…

Gruß Gernot

Danke, dann werd ich mal mein Glück versuchen.

Grüße
Daniel

So, ich habs mittlerweile so weit, dass eine Cookie gesetzt wird, ob die Box aktiviert ist oder nicht. Was mir jetzt allerdings noch Probleme bereitet ist das Zugreifen auf eine bestimmte Checkbox und deren Status auf „checked“ zu setzen, wenn sie schon einmal aktiviert wurde. Also so, dass wirklich ein Häkchen gemacht wird und auch angezeigt wird, wenn man die Seite erneut aufruft.

Momentan funktioniert es so, dass ich z.B. eine Checkbox anhake. Beim erneuten Aufrufen der Seite wird die Meldung ausgegeben „Checkbox XY ist aktiviert“. Soweit funktionierts also schon.

Grüße
Daniel

Hallo lieber Daniel,

So, ich habs mittlerweile so weit, dass eine Cookie gesetzt
wird, ob die Box aktiviert ist oder nicht. Was mir jetzt
allerdings noch Probleme bereitet ist das Zugreifen auf eine
bestimmte Checkbox und deren Status auf „checked“ zu setzen,
wenn sie schon einmal aktiviert wurde. Also so, dass wirklich
ein Häkchen gemacht wird und auch angezeigt wird, wenn man die
Seite erneut aufruft.

Meine Lösung ist auch erst halb fertig und ich sehe daran, dass ich bezüglich Sessions und Cookies auch noch Lernbedarf habe.

Folgendes funktioniert bereits im Firefox_3 und im IE_7, solange immer noch eine Instanz davon auf ist, beim Öffnen neuer Fenster und neuer Tabs, wenn man dieselbe Seite neu aufruft.

Wenn man den entsprechenden Browser allerdings komplett zumacht, merkt der sich rein gar nichts und Opera und Safari sind sowieso die reine Katastrophe und markieren andere als die ausgewählten Zutaten zum Kuchenbacken.

Ich werde das Problem am Wochenende im SELFHTML-Forum posten http://forum.de.selfhtml.org/ falls du oder jemand anders hier nicht vorher die Lösung findet oder im oben genannten Forum postet. Das kann man da, anders als hier, ja auch ohne einen Tag Wartezeit!

Zusammen finden wir die Lösung!

Gruß Gernot

http://www.lernspielwiese.de/cbCookie.html

Sieben Sachen
h1 { text-align:center; }
h1, dl { width:12em; margin:0 auto;padding:0; }
dt { margin:0;padding:0;width:4em;float:left; }
dd { margin:0;padding:0;width:2em;float:left; }

/* <![CDATA[ */
window.onload = function () {
myForm = document.forms.siebenSachen;
if( document.cookie ) {
myValues = document.cookie.split(";");
for (i = 0; i < myForm.elements.length ; i++ ) {
with( myValues[i] ) {
myForm.elements[i].checked = parseInt( substring( indexOf(’=’)+1, length ) );
}
}
} else {
for (i = 0; i < myForm.elements.length ; i++ ) {
myCookieValue = myForm.elements[i].checked ? 1 : 0;
document.cookie = myForm.elements[i].name + „=“ + myCookieValue ;
}
}
var ablauf = new Date();
var inEinerWoche = ablauf.getTime() + ( 7 * 24 * 60 * 60 * 1000 );
ablauf.setTime( inEinerWoche );
document.cookie = „expires=“ + ablauf.toGMTString();

for (i = 0; i < myForm.elements.length ; i++ ) {
myForm.elements[i].onclick = function () {
myCookieValue = this.checked ? 1 : 0;
document.cookie = this.name + „=“ + myCookieValue ;
}
}
}
/* ]]> */

Sieben Sachen

Eier

Schmalz

Butter

Salz

Milch

Mehl

Safran

Cookies mundgerecht angerichtet!
Hallo nochmal,

Meine Lösung ist auch erst halb fertig und ich sehe daran,
dass ich bezüglich Sessions und Cookies auch noch Lernbedarf
habe.

Diese grobe Wissenslücke hat mir keine Ruhe gelassen.
Das Problem mit Opera und Safari habe ich gelöst, indem ich die Elements-Collection des Fromulars nun über ein assoziatives Array statt über Index anspreche. Das Problem mit dem Verfallsdatum lag daran, dass ich dieses als eigenes Cookie zu setzen versuchte, statt als Anhang zu jedem einzelnen Cookie.

Nachfolgend das verfeinerte Cookie-Rezept. Ich hoffe es mundet. :wink:
http://www.lernspielwiese.de/cbCookie.html

Gruß Gernot

Sieben Sachen
h1, p { text-align:center;clear:both; }
dl { width:12em; margin:0 auto;padding:0; }
dt { margin:0;padding:0;width:4em;float:left; }
dd { margin:0;padding:0;width:2em;float:left; }

/* <![CDATA[ */

function setExpiration () {
var ablauf = new Date();
var inEinerWoche = ablauf.getTime() + ( 7 * 24 * 60 * 60 * 1000 );
ablauf.setTime( inEinerWoche );
return „; expires=“ + ablauf.toGMTString();
}

function isCheckable( elmnt ) {
if( elmnt && elmnt.type ) {
return elmnt.type == ( ‚checkbox‘ || ‚radio‘ );
}
return false;
}

window.onload = function () {
myForm = document.forms.siebenSachen;
if( document.cookie ) {
mySingleCookie = document.cookie.split("; „);
for (i = 0; i < mySingleCookie.length ; i++ ) {
mySingleCookieParts = mySingleCookie[i].split(“=");
if( isCheckable( myForm[mySingleCookieParts[0] ] ) ) {
myForm[mySingleCookieParts[0] ].checked = parseInt( mySingleCookieParts[1] );
}
}
} else {
for (i = 0; i < myForm.elements.length ; i++ ) {
if( isCheckable( myForm.elements[i] ) ) {
myCookieValue = myForm.elements[i].checked ? 1 : 0;
document.cookie = myForm.elements[i].id + „=“ + myCookieValue + setExpiration();
}
}
}

for (i = 0; i < myForm.elements.length ; i++ ) {
if( isCheckable( myForm.elements[i] ) ) {
myForm.elements[i].onclick = function () {
myCookieValue = this.checked ? 1 : 0;
document.cookie = this.id + „=“ + myCookieValue + setExpiration();
}
}
}
}
/* ]]> */

Sieben Sachen

Eier

Schmalz

Butter

Salz

Milch

Mehl

Safran

[alert(document.cookie);](javascript:alert(document.cookie):wink:

Danke erstmals für die tolle funktionierende Lösung.
Was ich aber aus dem Code leider noch immer nicht herauslesen kann ist die Antwort auf meine eigentliche Frage:

Wie setzt du die Checkboxen beim Laden der Seite auf checked/ unchecked?
Geschieht das in dieser Zeile oder täusche ich mich da vielleicht?

myForm[mySingleCookieParts[0] ].checked = parseInt( mySingleCookieParts[1] );

Diese Zeile wird ja beim Laden des Fensters ausgeführt, wenn schon ein Cookie gesetzt ist, aber was macht sie genau?

Bitte nochmal um ganz kurze Erklärung.
Danke!

Grüße
Daniel

Hallo Daniel,

nur damit du dich nicht wunderst, ich habe gerade den Quellcode noch einmal -im doppelten Sinne- verschlankt hochgeladen und bei Butter und Schmalz Radio-Buttons draus gemacht, sodass man immer nur eins von beidem wählen kann: Das ist ja dann auch fett genug. (Die Liedtexte von Backe-Backe-Kuchen schwanken übrigens zwischen Zucker und Butter)

Bei Radio-Buttons hat man ja das Problem, dass man da nicht nur den angeklickten anwählt, sondern einen anderen, zuvor angewählten aus der Gruppe auch gleichzeitig abwählt, was ich auch noch in meinem Cookie-Script nachvollziehen musste.

Aber jetzt zu deiner Frage:

Wie setzt du die Checkboxen beim Laden der Seite auf checked/
unchecked?
Geschieht das in dieser Zeile oder täusche ich mich da
vielleicht?

myForm[mySingleCookieParts[0] ].checked =
parseInt( mySingleCookieParts[1] );

Diese Zeile wird ja beim Laden des Fensters ausgeführt, wenn
schon ein Cookie gesetzt ist, aber was macht sie genau?

Ja, das geschieht genau in dieser Zeile.

Ich spreche die Elements-Collection meines Formulars, wie gesagt, nicht mehr über deren Index an, wie noch in meiner ersten Version, sondern über die IDs ihrer Members (Die Elements-Collection als assoziatives Array, sozusagen). Die ID des Elements wird bei Klick darauf ja als erster Teil des einzelnen Cookies vor dem Gleichheitszeichen angelegt. Als zweiter Teil des Einzelcookies wird je nachdem, ob das Element gecheckt ist oder nicht eine „1“ oder eine „0“ hinter das Gleichheitszeichen in das Cookie geschrieben.

Wenn ich die Werte nachher auslese, splitte ich die Gesamtcookie-Datei erst einmal an den Semikolons, die von einem Leerzeichen gefolgt werden. Dadurch erhalte ich ein Array mit allen Einzelcookies als Wertepaaren. In einem zweiten Schritt splitte ich noch einmal am Gleichheitszeichen. Dadurch erhalte ich wiederum zwei Teile in einem Array:

  • mySingleCookieParts[0] entspricht der ID des INPUT-Elements das beim Laden gecheckt werden soll, weil das Cookie sich das so gemerkt hat.

  • mySingleCookieParts[1] entspricht dem zugewiesenen Wert. (In meiner neuesten Variante werden nur noch Checkboxen gemerkt, deren Checked-Wert auf „true“ steht)

Da der zugewiesene Wert allerdings auch ein String ist, und es in JavaScript keine Methode parseBoolean() gibt, konvertiere ich den String „1“ über parseInt() in eine Ganzzahl.

Das wäre jetzt in der letzten Version, wo ich mir nur noch die Checkboxen und Radiobuttons in Cookies merke, die auch tatsächlich gecheckt sind, wahrscheinlich gar nicht mehr nötig, weil ja alles, was als Zeichenkette nicht leer ist, sowieso als true interpretiert wird. Auch wenn ich das Zeichen „0“ jetzt nicht mehr habe, lasse ich das parseInt() hier aber lieber doch drin, es schadet ja auch nicht.
:wink:

Gruß Gernot

Nochmal ein ganz großes Dankeschön für die tolle Lösung und die Mühe, die du dir gemacht hast. Ich hab’s mittlerweile für meinen Zweck ausprobiert und es funktioniert auch hier super.
Danke nochmal!

Grüße
Daniel