{"id":1598,"date":"2012-07-20T10:29:33","date_gmt":"2012-07-20T10:29:33","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=1598"},"modified":"2012-07-20T10:29:33","modified_gmt":"2012-07-20T10:29:33","slug":"how-to-prevent-a-user-leaving-a-page-with-unsaved-data","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2012\/07\/20\/how-to-prevent-a-user-leaving-a-page-with-unsaved-data\/","title":{"rendered":"How to prevent a user leaving a page with unsaved data"},"content":{"rendered":"            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushXml.js\"><\/script>\n            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushJScript.js\"><\/script>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/2012\/07\/20\/how-to-prevent-a-user-leaving-a-page-with-unsaved-data\/wait\/\" rel=\"attachment wp-att-1609\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1609\" title=\"wait\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/07\/wait.jpeg\" alt=\"\" width=\"258\" height=\"195\" \/><\/a>A lot of good websites provide a failsafe check that a user might accidentally leave a page with unsaved data. This is a good thing to have, specially in forms which are long or important. It can be done easily using jQuery and javascript.<\/p>\n<p>It consists of hooking the window.onbeforeunload() event and putting a check that only if the user has not pressed a submit button that it should show a prompt.<\/p>\n<p>The sample html is given below:<br \/>\n<pre class=\"brush: xml\">\t&lt;form &gt;\r\n\t\tName &lt;input name=&quot;n&quot;&gt;&lt;br&gt;\r\n\t\tAge &lt;select name=cboAge&gt;\r\n\t\t\t&lt;option value=&quot;0&quot;&gt;Select&lt;\/option&gt;\r\n\t\t\t&lt;option value=&quot;10&quot;&gt;10&lt;\/option&gt;\r\n\t\t\t&lt;option value=&quot;20&quot;&gt;20&lt;\/option&gt;\r\n\t\t\t&lt;\/select&gt;\r\n\t\t\t&lt;br&gt;\r\n\t\tDetails &lt;textarea name=det rows=5 cols=60&gt;&lt;\/textarea&gt;&lt;br&gt;\r\n\t\t&lt;input type=submit value=&quot;Save&quot;&gt;&lt;br&gt;\r\n\t\t&lt;br&gt;\r\n\t\t&lt;a href=&quot;http:\/\/www.google.com&quot;&gt;Go away from this page&lt;\/a&gt;\r\n\t\t \t\r\n\t&lt;\/form&gt;\r\n<\/pre><\/p>\n<p>The sample javascript is given below:<br \/>\n<pre class=\"brush: js\">var prompt=true;\r\n\r\n\t\t$(document).ready(function() {\r\n\r\n\t\t\t\t$(&#039;input:not(:button,:submit),textarea,select&#039;).change(function () {\r\n\t\t\t\t\twindow.onbeforeunload = function () {\r\n\t\t\t\t\t\tif (prompt == true) \r\n\t\t\t\t\t\t\treturn &quot;You have made changes to the page&quot;;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\r\n\r\n\t\t\t\t$(&#039;input:submit&#039;).click(function(e) {\r\n\t\t\t\t\tprompt = false;\r\n\t\t\t\t\t});\r\n\t    });\r\n\r\n\t\t\r\n<\/pre><\/p>\n<p>Note than Firefox will not show your message but it will show its own prompt message. Other browsers will show your message. This approach also works if a person tries to close the browser window or tab or types in a new URL in the same window.<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>A lot of good websites provide a failsafe check that a user might accidentally leave a page with unsaved data. This is a good thing <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2012\/07\/20\/how-to-prevent-a-user-leaving-a-page-with-unsaved-data\/\" title=\"How to prevent a user leaving a page with unsaved data\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10,11],"tags":[],"class_list":["post-1598","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","category-tutorials"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=1598"}],"version-history":[{"count":16,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1598\/revisions"}],"predecessor-version":[{"id":1615,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1598\/revisions\/1615"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=1598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=1598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=1598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}