{"id":498,"date":"2011-02-20T13:12:29","date_gmt":"2011-02-20T12:12:29","guid":{"rendered":"https:\/\/d-mueller.de\/blog\/?p=498"},"modified":"2016-01-11T23:30:33","modified_gmt":"2016-01-11T22:30:33","slug":"aenderungen-einer-form-ueberwachen","status":"publish","type":"post","link":"https:\/\/d-mueller.de\/blog\/aenderungen-einer-form-ueberwachen\/","title":{"rendered":"\u00c4nderungen einer Form \u00fcberwachen"},"content":{"rendered":"

Aufgabenstellung:<\/b> Ich m\u00f6chte eine <form> mit allen ihren Elementen \u00fcberwachen, ob der Benutzer eine \u00c4nderung vorgenommen hat. Wenn dem so ist und er die Seite verl\u00e4sst \/ neu l\u00e4dt, ohne die Form abgeschickt zu haben, soll ein Hinweis erscheinen, der ihn darauf aufmerksam macht und fragt, ob er die Seite wirklich verlassen m\u00f6chte.<\/p>\n

Das HTML-Ger\u00fcst<\/h2>\n

Mal alles hingezimmert, was wir so an Formularelementen kennen:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<script src="http:\/\/code.jquery.com\/jquery-1.5.js"><\/script>\r\n\t<script>\r\n\t\/\/Code folgt dann hier\r\n\t<\/script>\r\n<\/head>\r\n<body>\r\n\t<form>\r\n\t\t<select name="select-single" id="select-single">\r\n\t\t\t<option>Single1<\/option>\r\n\t\t\t<option>Single2<\/option>\r\n\t\t<\/select>\r\n\t\t<select name="select-multiple" id="select-multiple" multiple="multiple">\r\n\t\t\t<option selected="selected">Multiple1<\/option>\r\n\t\t\t<option>Multiple2<\/option>\r\n\t\t\t<option selected="selected">Multiple3<\/option>\r\n\t\t<\/select>\r\n\t\t<input type="checkbox" name="check" value="check1" id="check1" \/>\r\n\t\t<input type="checkbox" name="check" value="check2" checked="checked" id="check2" \/>\r\n\t\t<input type="radio" name="radio" value="radio1" checked="checked" id="radio1" \/>\r\n\t\t<input type="radio" name="radio" value="radio2" id="radio2" \/>\r\n\t\t<input type="text" name="text" value="default text" id="text" \/>\r\n\t\t<textarea name="textarea" id="textarea">foobar<\/textarea>\r\n\t<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Da w\u00e4ren also ein Select, ein Select mit Mehrfachauswahl, ein Textfeld, eine Textarea, zwei Radiobuttons und zwei Checkboxen. Das sollte alles gewesen sein, was uns HTML 4 so zur Verf\u00fcgung stellt.<\/p>\n
Naiver erster Versuch: onchange observieren<\/h2>\n
Wir packen in den head:<\/p>\n
\r\nvar formHasChanged = false;\r\n\r\n$(document).ready(function()\r\n{\r\n\t$("select, input, textarea").change(function()\r\n\t{\r\n\t\tformHasChanged = true;\r\n\t});\r\n});\r\n<\/pre>\n
Ver\u00e4ndert der Benutzer also irgendwas, wird die globale Variable formHasChanged<\/i> „getrue’t“. Problem dabei:<\/b> Wenn der Benutzer jetzt bspw. etwas in die Textarea tippt, dann aber doch wieder rausl\u00f6scht hat er effektiv nichts ge\u00e4ndert. Unsere naive L\u00f6sung rafft das aber nicht. Also nicht toll. Jetzt fehlt aber noch die Magie dazu, die den Benutzer beim Verlassen der Seite fragt, ob er nicht doch bleiben m\u00f6chte (geklaut und leicht abgewandelt von hier<\/a>). Brauchen wir auch in allen anderen, noch folgenden Ans\u00e4tzen:<\/p>\n
\r\nwindow.onbeforeunload = function (e) \r\n{\r\n\tif (!formHasChanged)\r\n\t\treturn;\r\n\t\t\r\n\tvar e = e || window.event,\r\n\t\tstr = 'Wollen Sie die Seite wirklich verlassen, ohne die \u00c4nderungen zu speichern?';\r\n\r\n\t\/\/ For IE and Firefox prior to version 4\r\n\tif (e) \r\n\t\te.returnValue = str;\r\n  \r\n\t\/\/ For Safari\r\n\treturn str;\r\n}\r\n<\/pre>\n
Schema dabei: Wenn sich die Form nicht ver\u00e4ndert hat, returnen wir gleich wieder und lassen den Benutzer die Seite verlassen, ohne das er etwas best\u00e4tigen muss. Sollte er etwas ver\u00e4ndert haben, greift die Funktion mit ihren Mechanismen f\u00fcr die verschiedenen Browser. Sieht \u00fcbrigens so aus:<\/p>\n
\"Chrome<\/a>
Chrome 9<\/p><\/div>\n
\"Firefox<\/a>
Firefox 3.6<\/p><\/div>\n
\"IE<\/a>
IE 8<\/p><\/div>\n
\"Safari<\/a>
Safari 5<\/p><\/div>\n
In Opera hauts aktuell noch nicht hin. Erw\u00e4hnt sei auch, dass ein Schlie\u00dfen des Browsers den Mechanismus nicht triggert.<\/p>\n
Zweite L\u00f6sung: Form serialisieren<\/h2>\n
\r\nvar initial = "";\r\n\r\n$(document).ready(function()\r\n{\r\n\tinitial = $("form").serialize();\r\n});\r\n\r\nfunction hasChanged() \r\n{\r\n\treturn !(initial === $("form").serialize());\r\n}\r\n\r\nwindow.onbeforeunload = function (e) \r\n{\r\n\tif (!hasChanged())\r\n\t\treturn;\r\n\t\t\r\n\tvar e = e || window.event,\r\n\t\tstr = 'Wollen Sie die Seite wirklich verlassen, ohne die \u00c4nderungen zu speichern?';\r\n\r\n\t\/\/ For IE and Firefox prior to version 4\r\n\tif (e) \r\n\t\te.returnValue = str;\r\n  \r\n\t\/\/ For Safari\r\n\treturn str;\r\n}\r\n<\/pre>\n
Simples Prinzip: Wir serialisieren die Form, wenn der Benutzer die Seite betritt. Sieht im Beispiel oben so aus:<\/p>\n
\r\nselect-single=Single1&select-multiple=Multiple1&select-multiple=Multiple3&check=check2&radio=radio1&text=default+text&textarea=foobar\r\n<\/pre>\n
Verl\u00e4sst der Benutzer nun die Seite, wird erneut serialisiert und die beiden Strings verglichen. Klappt gut.<\/p>\n
L\u00f6sung 3: Default-Wert pr\u00fcfen<\/h2>\n
Konzept: Bevor der Benutzer die Seite verlassen will, \u00fcberpr\u00fcfen wir alle Elemente, ob ihr aktueller Wert von ihrem Default-Wert abweicht. War mir vor kurzem noch nicht bekannt, dass das mit Bordmitteln geht! Leider hei\u00dft die M\u00f6glichkeit dazu bei allen Elementen etwas anders: <\/p>\n
defaultValue bei textarea \/ input type=text<\/h3>\n
\r\n<input type="text" id="textfield" value="Wert 1" \/>\r\n<textarea id="textarea">Wert 2<\/textarea>\r\n<script>\r\nalert(document.getElementById("textfield").defaultValue); \/\/Wert 1\r\nalert(document.getElementById("textarea").defaultValue); \/\/Wert 2\r\n<\/script>\r\n<\/pre>\n
Damit l\u00e4sst sich doch Arbeiten. <\/p>\n
defaultChecked bei Radiobutton \/ Checkbox<\/h3>\n
\r\n<input type="checkbox" checked="checked" id="check" \/>\r\n<input type="radio" id="radio" \/>\r\n<script>\r\nalert(document.getElementById("check").defaultChecked); \/\/true\r\nalert(document.getElementById("radio").defaultChecked); \/\/false\r\n<\/script>\r\n<\/pre>\n
Etwas komplizierter bei Selects<\/h3>\n
Selects gibts ja grunds\u00e4tzlich mit oder ohne Mehrfachauswahl. Deswegen m\u00fcssen wir hier schonmal aufpassen. Weiterhin hei\u00dft unser gesuchtes Attribut defaultSelected<\/i> und ist folgenderma\u00dfen abzugreifen:<\/p>\n
\r\n<select id="sel" multiple="multiple">\r\n\t<option selected="selected">Multiple1<\/option>\r\n\t<option>Multiple2<\/option>\r\n\t<option selected="selected">Multiple3<\/option>\r\n<\/select>\r\n\r\n<script>\r\nvar sel = document.getElementById("sel");\r\nfor (var i = 0; i < sel.options.length; i++) \r\n{\r\n\talert(sel.options[i].defaultSelected); \/\/true, false, true\r\n}\r\n<\/script>\r\n<\/pre>\n
Analog ist es beim Select ohne Mehrfachauswahl.<\/p>\n
Jetzt kombinieren wir das alles zusammen<\/h3>\n
\r\nvar FormChangeChecker = \r\n{\r\n\tselectHasChanged: function (domelem)\r\n\t{\r\n\t\tvar selectchanged = false, \r\n\t\t\tdef = 0;\r\n\t\t\r\n\t\tfor (var i = 0; i < domelem.options.length; i++) \r\n\t\t{\r\n\t\t\tif (domelem.options[i].selected != domelem.options[i].defaultSelected)\r\n\t\t\t\tselectchanged = true;\r\n\t\t\t\t\r\n\t\t\tif (domelem.options[i].defaultSelected) \r\n\t\t\t\tdef = i;\r\n\t\t}\r\n\t\t\r\n\t\tif (selectchanged && !domelem.multiple) \r\n\t\t\tselectchanged = (def != domelem.selectedIndex);\r\n\t\t\t\r\n\t\treturn selectchanged;\r\n\t},\r\n\t\r\n\ttextinputOrTextareaHasChanged: function (domelem)\r\n\t{\r\n\t\treturn domelem.value != domelem.defaultValue;\r\n\t},\r\n\t\r\n\tradioOrCheckboxHasChanged: function (domelem)\r\n\t{\r\n\t\treturn domelem.checked != domelem.defaultChecked;\r\n\t},\r\n\t\r\n\tformHasChanged: function ()\r\n\t{\r\n\t\tvar formWasChanged = false;\r\n\t\t\r\n\t\t$("select").each(function()\r\n\t\t{\r\n\t\t\tif (FormChangeChecker.selectHasChanged(this))\r\n\t\t\t\tformWasChanged = true;\r\n\t\t});\r\n\t\t\r\n\t\t$("input[type=text], textarea").each(function()\r\n\t\t{\r\n\t\t\tif (FormChangeChecker.textinputOrTextareaHasChanged(this))\r\n\t\t\t\tformWasChanged = true;\r\n\t\t});\r\n\t\t\r\n\t\t$("input[type=radio], input[type=checkbox]").each(function()\r\n\t\t{\r\n\t\t\tif (FormChangeChecker.radioOrCheckboxHasChanged(this))\r\n\t\t\t\tformWasChanged = true;\r\n\t\t});\r\n\t\t\r\n\t\treturn formWasChanged;\r\n\t}\r\n};\r\n<\/pre>\n
Ist jetzt eigentlich trivial. Es gibt eine Funktion zum \u00fcberpr\u00fcfen, ob sich ein Select ge\u00e4ndert hat (dabei erschl\u00e4gt die Funktion sowohl Selects mit als auch ohne Mehrfachauswahl). Dann haben wir eine Funktion zum \u00dcberpr\u00fcfen, ob sich eine Checkbox \/ ein Radiobutton ge\u00e4ndert hat. Schlussendlich noch dasselbe f\u00fcr Textfelder und Textareas. Das sind also nur die bereits durchgekauten Codebeispiele von weiter oben. Jetzt flie\u00dft das alles zusammen in der Funktion formHasChanged()<\/b>. Wir gehen alle Arten von Elementen durch und stecken sie in die jeweilige Funktion. Damit brauchen wir nur noch unser bereits bekanntes Snippet window.onbeforeunload<\/b>:<\/p>\n
\r\nwindow.onbeforeunload = function (e) \r\n{\r\n\tif (!FormChangeChecker.formHasChanged())\r\n\t\treturn;\r\n\t\t\r\n\tvar e = e || window.event,\r\n\t\tstr = 'Wollen Sie die Seite wirklich verlassen, ohne die \u00c4nderungen zu speichern?';\r\n\r\n\t\/\/ For IE and Firefox prior to version 4\r\n\tif (e) \r\n\t\te.returnValue = str;\r\n  \r\n\t\/\/ For Safari\r\n\treturn str;\r\n}\r\n<\/pre>\n
Okay, und was soll soll man jetzt verwenden?<\/h2>\n
Die zweite Variante mit dem simplen serialize hat das Problem, dass man nicht einfach feststellen kann, welches<\/b> Element sich genau ver\u00e4ndert hat, sondern nur das sich irgendwas ver\u00e4ndert hat. Wenn wir das noch feingranular gestalten m\u00fcssen (etwa das Element highlighten, welches ver\u00e4ndert wurde), kann also die default-value Variante die bessere sein. Grenzen haben die L\u00f6sungen zudem, wenn Elemente w\u00e4hrend der Laufzeit neu hinzugef\u00fcgt werden. Aber auch das sollte mit etwas Anpassung zu bew\u00e4ltigen sein. Wer jetzt ohne fieses zusammenkopieren alle 3 Varianten zum herumspielen haben m\u00f6chte, der findet hier eine zip<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Aufgabenstellung: Ich m\u00f6chte eine <form> mit allen ihren Elementen \u00fcberwachen, ob der Benutzer eine \u00c4nderung vorgenommen hat. Wenn dem so ist und er die Seite verl\u00e4sst \/ neu l\u00e4dt, ohne die Form abgeschickt zu haben, soll ein Hinweis erscheinen, der … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,3],"tags":[],"class_list":["post-498","post","type-post","status-publish","format-standard","hentry","category-javascript","category-webdev"],"_links":{"self":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":0,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/498\/revisions"}],"wp:attachment":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/media?parent=498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/categories?post=498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/tags?post=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}