Post
Ask Question

Page is Dirty using JavaScript

Dirty Means


If user change any data or check any box or select any value from drop down and he forget to save the data and click on exit button or closing the browser then if you want to show the message to user, before cancel or exit please save the data.

Here is the code.
  1. <script type="text/javascript" language="javascript">  
  2. function confirmExit(isHeaderCheckRequired) {  
  3.   //debugger;  
  4.   var ask = 'You have done some changes which are not saved yet.\n\n' +  
  5.     'You will loose unsaved changes if you proceed!\n' +  
  6.     'OK -> Loose changes Cancel -> Stay\n\n' +  
  7.     'Press OK to continue, or Cancel to stay on the current page.';  
  8.   var result = true,  
  9.     isModified = false;  
  10.   var hfModified = null;  
  11.   
  12.   hfModified = $get('<%= hfRMPModified.ClientID %>');  
  13.   pnlRisk = $get('<%=pnlRiskActionPlan.ClientID %>');  
  14.   pnlRiskHeaderDetails = $get('<%=pnlRMPHeaderData.ClientID %>');  
  15.   
  16.   //check if modified, if yes then confirm, if yes then set the active tab index  
  17.   if (hfModified.value == '1') {  
  18.     isModified = true;  
  19.   } else {  
  20.     if (pnlRisk != null && pnlRiskHeaderDetails != null) { // panel) {  
  21.       isModified = is_dirty(pnlRisk, pnlRiskHeaderDetails, isHeaderCheckRequired);  
  22.     }  
  23.   }  
  24.   if (isModified == true) {  
  25.     result = confirm(ask);  
  26.     if (result == false) {} else { hfModified.value = '0'; }  
  27.   }  
  28.   return result;  
  29. }  
  30.   
  31. function is_dirty(pnlRisk, pnlRiskHeaderDetails, isHeaderCheckRequired) {  
  32.   var result = false;  
  33.   if (isHeaderCheckRequired)  
  34.     result = isPanelModified(pnlRiskHeaderDetails);  
  35.   if (!result && pnlRisk.style.display != 'none') {  
  36.     result = isPanelModified(pnlRisk)  
  37.   }  
  38.   return result;  
  39. }  
  40.   
  41. function isPanelModified(panel) {  
  42.   var tage = panel.getElementsByTagName("input");  
  43.   for (var i = 0; i < tage.length; i++) {  
  44.     switch (tage[i].type) {  
  45.       case 'text':  
  46.       case 'textarea':  
  47.         if (!/^\s*$/.test(tage[i].value) && tage[i].value != tage[i].defaultValue) {  
  48.           if (tage[i].value != '__/___/____') return true;  
  49.         }  
  50.         break;  
  51.       case 'checkbox':  
  52.       case 'radio':  
  53.         if (tage[i].checked != tage[i].defaultChecked) return true;  
  54.         break;  
  55.     }  
  56.   }  
  57.   var tage = panel.getElementsByTagName("TEXTAREA");  
  58.   for (var i = 0; i < tage.length; i++) {  
  59.     if (!/^\s*$/.test(tage[i].value) && tage[i].value != tage[i].defaultValue) {  
  60.       return true;  
  61.     }  
  62.   }  
  63.   tage = panel.getElementsByTagName("select")  
  64.   for (var i = 0; i < tage.length; i++) {  
  65.     if (tage[i].id == 'ctl00_CPHSiteMaster_ftbRiskDescription_0_0' || tage[i].id == 'ctl00_CPHSiteMaster_txtActionItem_0_0')  
  66.       continue;  
  67.     else {  
  68.       switch (tage[i].type) {  
  69.         case 'select-one':  
  70.         case 'select-multiple':  
  71.           var el, j = 0;  
  72.           while (el = tage[i].options[j++])  
  73.             if (el.selected != el.defaultSelected)  
  74.               return true;  
  75.           break;  
  76.       }  
  77.     }  
  78.   }  
  79.   return false;  
  80. }  
  81. </script>