How to Detect Changes on Form Before Leaving the Page in Websites that Generated by PHPMaker 9.2.0

This following trick will show you how to add the ability to detect the changes on the form before user leaving the page in websites that generated by PHPMaker. If a user does the changes, for example, he is typing something new or editing the existing value on a field, afterwards he wants to go to another page by clicking the certain menu link, then system will display a confirmation dialog box that asking the user whether to leave or stay on the page. This is very useful and will help your users to remind them after doing something on the form and then leaving the page but they forgot to save the changes.

I have successfully created a simple .js (Javascript) file for this, and integrate it to any form that generated by PHPMaker. No need to customize the generated script file for this. All we have to do is by including the javascript file above using the Page_Head of Server Events in PHPMaker, and we are ready to go! That's it? Yes, that's it! So simple, right? Again, we will use jQuery for this. This is one of the most wanted features in a web application that neeeded by users. So, I guarantee, you're gonna love it.

After implementing this following trick, then here is the exactly things that will be happened: When your user types or changes something on the form and then he clicks on any menu link in order to leave the current page, then the color of the text on the Submit button will be changed become red, and there is a Javascript warning message will remind your user whether to leave or stay on the current page. So users can decide whether to continue working on the current page or just leaving the current page without saving the changes.

In addition, if for somehow, you customize PHPMaker template file in order to add the Reset button on the form, and then user press that Reset button, then all the changes will be reset and the Red color of the text on the Submit button of the form will be back to normal again. In other words, this following trick also has the ability to reset the changes.

[hidepost]

1. Create a new file, copy and paste the following code into it, save it as changes.js and then put this file under \Script\ directory of your extracted PHPMaker template:

   $(document).ready(function(){
       $("form.ewForm :input").change(function() {
           var fObj = $(this).closest('form');
           if(!fObj.data('changed')){
               fObj.data('changed', true);
               $('input[type=submit]', fObj).css('color', 'red');
               $(window).bind('beforeunload', function(e) {
                   return 'Are you sure you want to leave? Any changes or info you\'ve entered will be discarded!';
                });
           }
       });
       $("form.ewForm :input[type=reset]").click(function() {
           var fObj = $(this).closest('form');
           if(fObj.data('changed')){
               $('input[type=submit]', fObj).removeAttr('style');
               $('label', fObj).removeAttr('style');
               $('label', fObj).removeClass('strike');
               fObj.data('changed', false);
               $(window).unbind('beforeunload');
           }
       });
       $('form.ewForm').submit(function() {
           var fObj = $(this).closest('form');
           if(fObj.data('changed')){
               $('input[type=submit]', fObj).removeAttr('style');
               $('label', fObj).removeAttr('style');
               $('label', fObj).removeClass('strike');
               fObj.data('changed', false);
               $(window).unbind('beforeunload');
           }
       });
   });
   

2. Open your \Script\control.xml file, and find this code:

       <!--
           Text files
       -->
   

   before the first line of that code, please insert the following code:

   	<control id="changes.js" type="copy" remark="Copy changes.js" ofolderid="_js" ifiles="changes.js" />
   

3. Open your PHPMaker project (.pmp) file using PHPMaker, and then click one of the tables from Database pane in the left side, and then click on Code (Server Events, Client Scripts and Custom Templates) tab, and then expand the following location: Server Events -> Global -> All Pages -> Page_Head, and then copy and paste the following code:

   ew_AddClientScript("phpjs/changes.js"); // Add JavaScript
   

   Please note that javascript code above will be applied to all pages, including the form on the List page if you give the checked marks, for example, whenever you want to delete or export the selected records. In order to avoid this will be happened at the grid or list page, then change the code above become:

   if (CurrentPageID() == "add" || CurrentPageID() == "edit") {
     ew_AddClientScript("phpjs/changes.js"); // Add JavaScript
   } 
   

   In other words, the code will only be applied to the Add and Edit pages.

4. Make sure you have already enabled Local YUI/jQuery files from Tools -> Advanced Settings. I always recommend to use this setting so we don’t have to use the online file from Yahoo website.
5. Generate all of your script files using PHPMaker as always, and enjoy the result! 🙂

[/hidepost]